javascript 有什么办法可以在改变innerHTML时产生过渡效果吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29640486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any way to have a transition effect when changing the innerHTML?
提问by saadq
I'm trying to add a transition effect when switching between projects. This code currently works, but I'd rather have something like having a fade effect when switching projects. Is this possible?
我试图在项目之间切换时添加过渡效果。这段代码目前有效，但我宁愿在切换项目时使用淡入淡出效果。这可能吗？
Here is a jsfiddleif that helps at all. Thanks!
如果有帮助的话，这里有一个 jsfiddle。谢谢！
My code:
我的代码：
HTML
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
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;
});
回答by álvaro Reneses
You can easily do that using a CSS transition. First you turn the opacity of the fields to 0, and then you replace the content and you make the fields appear again.
您可以使用CSS transition轻松做到这一点。首先将字段的不透明度设为 0，然后替换内容并使字段再次出现。
For doing this, first you 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:
添加以下 CSS 代码：
<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>
And then, add before the change:
然后，在更改之前添加：
var project = document.querySelector('#project');
project.style.opacity = 0;
And after it:
之后：
project.style.opacity = 1;
The final javascript would be:
最终的 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 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/
你可以在这里试试：https: //jsfiddle.net/9c4mx7p9/
EDIT
编辑
Version with CSS classes: https://jsfiddle.net/y4p1y0ch/
带有 CSS 类的版本：https: //jsfiddle.net/y4p1y0ch/
回答by Tahir Ahmed
This seems like a great opportunity for me to present to you the ever awesome GreenSock Animation Platform(or GSAPin short).
这对我来说似乎是一个很好的机会，可以向您展示令人敬畏的GreenSock 动画平台（简称GSAP）。
GSAP is arguably the most respected animation platform out there for Flash and JavaScript developers alike. Head over to their website for more information about this tool-set.
GSAP 可以说是最受 Flash 和 JavaScript 开发人员推崇的动画平台。有关此工具集的更多信息，请访问他们的网站。
On to codes. Assuming that you have added TweenMaxin your HTML:
到代码。假设您在 HTML 中添加了TweenMax：
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 jsFiddleI forked from yours.
P.S. I am not affiliated with this project in any way. I am just a big fan of this library and have been using it in my projects for as long as I have been coding professionally. :)
PS 我与这个项目没有任何关联。我只是这个库的忠实粉丝，并且只要我一直在进行专业编码，就一直在我的项目中使用它。:)
回答by Harsha
This is an answer without using wrapping. Suppose I have to replace element with repID with pagID, where repID element dims for 0.5sec and padID element becomes opaque for the next 0.5 sec, then it can be done using the following code in CSS,
这是一个不使用包装的答案。假设我必须用 pagID 替换带有 repID 的元素，其中 repID 元素变暗 0.5 秒并且 padID 元素在接下来的 0.5 秒内变得不透明，然后可以使用以下 CSS 代码来完成，
#repIdName{
transition: opacity .5s ease-in-out;}
and the following in JavaScript
以及 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 calling would be somewhat like this
在 HTML 中，函数调用有点像这样
<a href="#"onclick="replaceID('repIdName','pagIdName)">
