有什么方法可以在更改innerHTML时产生过渡效果？ [英] Is there any way to have a transition effect when changing the innerHTML?
问题描述
我试图在项目之间切换时添加转换效果。此代码目前可行，但我宁愿在切换项目时遇到类似淡化效果的情况。这可能吗？
这是一个jsfiddle 如果有帮助的话。
$ b 我的代码：
HTML
<身体GT;
< div id =proj_name>< / div>
< div id =proj_description>< / div>
< img id =proj_imgsrc =>< br>
< button id =proj_switcher>下一个项目< / button>
< / body>
JavaScript
*项目的构造函数
* /
函数Project（name，description，img）{
this.name = name;
this.description = description;
this.img = img;
}
//一个包含所有项目及其信息的数组
var projects = [
新项目（'Project 1'，'Project 1 Description'， 'http://bit.ly/1E0IzpX'），
新项目（'Project 2'，'Project 2 Description'，'http://bit.ly/1FHLGOt'），
新项目（'Project 3'，'Project 3 Description'，'http://bit.ly/1H5wRt7'），
新项目（'Project 4'，'Project 4 Description'，'http：// bit。新项目（'项目5'，'项目5描述'，'http://bit.ly/1CYeY9F'）
];
新项目
//缓存HTML元素
var projName = document.querySelector（'＃proj_name'）;
var projDescr = document.querySelector（'＃proj_description'）;
var projImg = document.querySelector（'＃proj_img'）;
var projButton = document.querySelector（'＃proj_switcher'）;
//显示当前项目的索引
var projIndex = 0;
projButton.addEventListener（ '点击'，函数（）{
projName.innerHTML =项目[projIndex]。名称;
projDescr.innerHTML =项目[projIndex] .DESCRIPTION;
projImg.src =项目[projIndex] .IMG;
projImg.style.width = '250像素';
projImg.style.height = '150像素';
projIndex =（projIndex + 1）％projects.length;
}）;
使用 CSS转换。首先将字段的不透明度设置为0，然后替换内容，并使字段再次出现。
为此，首先包装项目字段：
<身体GT;
< div id =project>< / div>
< div id =proj_name>< / div>
< div id =proj_description>< / div>
< img id =proj_imgsrc =>< br>
< / div>
< button id =proj_switcher>下一个项目< / button>
< / body>
添加以下CSS代码：
<风格>
#project {
-webkit-transition：opacity .5s ease-in-out;
-moz-transition：不透明.5s缓入;
-ms-transition：不透明.5s缓入;
-o-transition：不透明.5s缓入;
过渡：不透明.5s缓和;
}
< / style>
然后，在更改之前添加：
var project = document.querySelector（'＃project'）;
project.style.opacity = 0;
然后：
project.style.opacity = 1;
最终的javascript会是：
<$ p
$ / b
$ / b
$ b $ ;
this.description = description;
this.img = img;
}
//一个包含所有项目及其信息的数组
var projects = [
新项目（'Project 1'，'Project 1 Description'， 'http://bit.ly/1E0IzpX'），
新项目（'Project 2'，'Project 2 Description'，'http://bit.ly/1FHLGOt'），
新项目（'Project 3'，'Project 3 Description'，'http://bit.ly/1H5wRt7'），
新项目（'Project 4'，'Project 4 Description'，'http：// bit。新项目（'项目5'，'项目5描述'，'http://bit.ly/1CYeY9F'）
];
新项目
//缓存HTML元素
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'）;
//显示当前项目的索引
var projIndex = 0;
projButton.addEventListener（'click'，function（）{
//淡出
project.style.opacity = 0;
//等待转换
setTimeout（function（）{
//加载新内容
projName.innerHTML = projects [projIndex] .name;
projDescr.innerHTML = projects [projIndex] .DESCRIPTION;
projImg.src =项目[projIndex] .IMG;
projImg.style.width = '250像素';
projImg.style.height = '150像素';
projIndex =（projIndex + 1）％projects.length;
//淡入
project.style.opacity = 1;
}，500）;
}）;
您可以在此尝试： https://jsfiddle.net/9c4mx7p9/
$ b 编辑
使用CSS类的版本： https://jsfiddle.net/y4p1y0ch/
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 jsfiddle if that helps at all. Thanks!
My 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;
});
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.
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:
<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:
/**
* 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/
这篇关于有什么方法可以在更改innerHTML时产生过渡效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
