Geek Answers Handbook

Is there a way to get the transition effect when innerHTML changes?

I am trying to add a transition effect when switching between projects. This code is currently working, but I would prefer something like a fade effect when switching projects. Is it possible?

Here is jsfiddle , if that helps at all. Thanks!

My code is:

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; });
+7
javascript html transition
source share
3 answers

You can easily do this using the CSS transition . First, you rotate the opacity of the fields to 0, and then you replace the contents, and you create the fields again.

To do this, first wrap the project fields:

 <body> <div id="project"></div> <div id="proj_name"></div> <div id="proj_description"></div> <img id="proj_img" src=""><br> </div> <button id="proj_switcher">Next Project</button> </body>

Add the following CSS code:

 <style> #project { -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } </style>

Then add before changing:

 var project = document.querySelector('#project'); project.style.opacity = 0;

And after him:

 project.style.opacity = 1;

The latest javascript will be:

 /** * 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 project = document.querySelector('#project'); 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() { // Fade out project.style.opacity = 0; // Wait for the transition setTimeout(function(){ // Load new content 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; // Fade in project.style.opacity = 1; },500); });

You can try it here: https://jsfiddle.net/9c4mx7p9/

EDIT

Version with CSS classes: https://jsfiddle.net/y4p1y0ch/

+6
source share

This seems to be a great opportunity for me to introduce you to the amazing GreenSock Animation Platform (or GSAP in short).

GSAP is arguably the most respected animation platform for Flash and JavaScript developers. Go to their website for more information on this toolbox.

Inclusion of codes. Assuming you added TweenMax to your HTML:

 var objectsToAnimate=[projName, projDescr, projImg]; var duration=.4; projImg.style.width = '250px'; projImg.style.height = '150px'; projButton.addEventListener('click', function() { TweenMax.to(objectsToAnimate, duration, {opacity:0, ease:Power4.easeIn, onComplete:function(){ projName.innerHTML = projects[projIndex].name; projDescr.innerHTML = projects[projIndex].description; projImg.src = projects[projIndex].img; projIndex = (projIndex + 1) % projects.length; TweenMax.to(objectsToAnimate, duration, {opacity:1, ease:Power4.easeOut}); }}); });

Take a look at this jsFiddle I cast yours.

PS I have nothing to do with this project. I am just a big fan of this library and use it in my projects as long as I professionally code. :)

0
source share

This is the answer without using a wrapper. Suppose I need to replace the repID element with pagID, where the repID element is dims for 0.5sec and the padID element becomes opaque within the next 0.5 seconds, then this can be done using the following code in CSS.

 #repIdName{ transition: opacity .5s ease-in-out;}

and the following in javascript

 function replaceID(repId,pagID){ var mainContent = document.getElementById(repID); var homeContent = document.getElementById(pagID).innerHTML; mainContent.style.opacity = 0; window.setTimeout(function () { mainContent.innerHTML = homeContent; console.log(pagID+"opened"); mainContent.style.opacity = 1; },500);}

in HTML the function call will be somewhat similar to this

 <a href="#"onclick="replaceID('repIdName','pagIdName)">
0
source share

More articles:


All Articles