Est-il possible d'avoir un effet de transition lors du changement de la innerHTML?
J'essaye d'ajouter un effet de transition lors de la commutation entre les projets. Ce code fonctionne pour l'instant, mais je préfère avoir quelque chose comme ayant un effet de fondu lors de la commutation de projets. Est-ce possible?
Voici un jsfiddle si cela aide à tous. Merci!
Mon code:
HTML
<body>
<div id="proj_name"></div>
<div id="proj_description"></div>
<img id="proj_img" src=""><br>
<button id="proj_switcher">Next Project</button>
</body>
JavaScript
/**
* Constructor function for Projects
*/
function Project(name, description, img) {
this.name = name;
this.description = description;
this.img = img;
}
//An array containing all the projects with their information
var projects = [
new Project('Project 1', 'Project 1 Description', 'http://bit.ly/1E0IzpX'),
new Project('Project 2', 'Project 2 Description', 'http://bit.ly/1FHLGOt'),
new Project('Project 3', 'Project 3 Description', 'http://bit.ly/1H5wRt7'),
new Project('Project 4', 'Project 4 Description', 'http://bit.ly/1ECIQht'),
new Project('Project 5', 'Project 5 Description', 'http://bit.ly/1CYeY9F')
];
//Cacheing HTML elements
var projName = document.querySelector('#proj_name');
var projDescr = document.querySelector('#proj_description');
var projImg = document.querySelector('#proj_img');
var projButton = document.querySelector('#proj_switcher');
//Index of the current project being displayed
var projIndex = 0;
projButton.addEventListener('click', function() {
projName.innerHTML = projects[projIndex].name;
projDescr.innerHTML = projects[projIndex].description;
projImg.src = projects[projIndex].img;
projImg.style.width = '250px';
projImg.style.height = '150px';
projIndex = (projIndex + 1) % projects.length;
});
Selon le type de transition et de la complexité, vous pourriez avoir un "hors champ" de la mémoire tampon div que vous basculez entre le contenu pour y parvenir. I. e fade in et fade out dans le même temps, nécessite probablement 2 chevauchement des divs (position absolue sur le dessus les uns des autres) où l'on est à l'opacité de 1 et l'autre à l'opacité de 0 et que la transition injecter de nouveau le contenu de la div invisible et, par la suite, l'ensemble de fondu de transition sur le visible div et fondu sur l'invisible div, et votre code besoin de garder une trace qui est qui car vous devrez alterner entre les deux.
Merci! Je suis plus susceptible de suivre vos conseils et à l'utilisation d'un fadeOut et fadeIn div.
Merci! Je suis plus susceptible de suivre vos conseils et à l'utilisation d'un fadeOut et fadeIn div.
OriginalL'auteur saadq | 2015-04-15
Vous devez vous connecter pour publier un commentaire.
Vous pouvez facilement le faire en utilisant un Transition CSS. Tout d'abord vous mettre l'opacité des champs à 0, puis vous remplacez le contenu et de vous apporter les champs apparaissent de nouveau.
Pour ce faire, d'abord, vous enroulez le champs de projet:
Ajouter le code CSS suivant:
Puis, ajouter avant le changement:
Et après:
La finale javascript serait:
Vous pouvez essayer ici: https://jsfiddle.net/9c4mx7p9/
MODIFIER
Version avec des classes CSS: https://jsfiddle.net/y4p1y0ch/
Ops! J'ai eu une erreur d'orthographe et j'ai oublié d'inclure la fonction de mise en attente. Il n'était pas possible de voir les changements parce que nous étions réglage de l'opacité de celle juste après le cacher. J'ai mis à jour les modifications, et vous pouvez l'essayer ici: jsfiddle.net/9c4mx7p9
Pas besoin d'utiliser deux divs. Il suffit de régler l'opacité à 1 après un court délai (1ms devrait être suffisant):
setTimeout(function () { project.style.opacity = 1 }, 1);
. Je vous recommande d'utiliser une classe plutôt bien et de conserver tous les style dans le CSS.Merci Alvaro, qui m'a vraiment aidé! Et merci pour l'astuce @powerbuoy, je vais créer fadeIn et fadeOut classes et simplement les ajouter à la liste de la classe au lieu de modifier le style dans le JS.
petite question existe - il un moyen d'utiliser des classes pour faire la même chose que vous avez fait? Il semble que les travaux pour le premier projet de l'interrupteur pour moi. jsfiddle.net/9c4mx7p9/1
OriginalL'auteur Álvaro Reneses
Cela semble être une bonne occasion pour moi de vous présenter le toujours génial GreenSock Animation De La Plateforme (ou GSAP en bref).
GSAP est sans doute le plus respecté de l'animation de la plateforme pour le Flash et le JavaScript les développeurs. Sur la tête de leur site web pour plus d'informations sur cet outil.
À des codes. En supposant que vous avez ajouté TweenMax dans votre code HTML:
Prendre un coup d'oeil à ce jsFiddle je bifurquais de la vôtre.
P. S. je ne suis pas affiliés avec ce projet de quelque façon. Je suis juste un grand fan de cette bibliothèque et l'utilise dans mes projets pour aussi longtemps que j'ai été codage professionnellement. 🙂
Je comprends, pas de soucis. Un commentaire cependant, vous voudrez peut-être prendre hors
style
des modifications à votreprojImg
image de la balise parce que je pense qu'il n'a pas besoin d'être appliqué par-dessus et une fois de plus sur chaque clic. Voyez-vous ce que je suggère?Oui, bon point! Juste quelques bâclée gauche sur le code quand j'ai été le tester, je vais le déplacer dans le fichier CSS :p
OriginalL'auteur Tahir Ahmed
C'est une réponse sans l'aide de l'emballage.
Supposons que j'ai pour remplacer l'élément avec repID avec pagID, où repID élément s'atténue pendant 0,5 sec et padID élément devient opaque pour la prochaine 0,5 secondes, puis il peut être fait en utilisant le code suivant dans le CSS,
et suivants dans le code JavaScript
en HTML, la fonction d'appel serait un peu comme ce
OriginalL'auteur Harsha