saa*_*adq 10 html javascript transition
我正在尝试在项目之间切换时添加过渡效果.这个代码目前有效,但我宁愿在切换项目时有一些淡入淡出效果.这可能吗？
这是一个jsfiddle,如果这有帮助的话.谢谢!
我的代码:
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;
});
Álv*_*ses 11
您可以使用CSS转换轻松完成此操作.首先,将字段的不透明度设置为0,然后替换内容,然后再次显示字段.
为此,首先要包装项目字段:
<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>
添加以下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>
然后,在更改之前添加:
var project = document.querySelector('#project');
project.style.opacity = 0;
之后:
project.style.opacity = 1;
最终的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);
});
你可以在这里试试:https://jsfiddle.net/9c4mx7p9/
CSS类的版本:https://jsfiddle.net/y4p1y0ch/