本文介绍了一个使用HTML5和CSS3实现平滑过渡效果的例子。通过定义不同的CSS样式，结合JavaScript来切换元素的位置和透明度，实现了流畅的动画效果。作者探讨了直接通过JavaScript修改CSS属性的方法，并提出了可能存在的问题。
寻找HTML5转换的一些例子我改编了我发现的最终得到我真正想要的东西。HTML5转换
div {
width: 50px;
height: 50px;
}
div.myDiv {
position: absolute;
-webkit-transition-property: top, opacity;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function:ease-in-out, ease-in-out;
-moz-transition-property: top, opacity;
-moz-transition-duration: 1s, 1s;
-moz-transition-timing-function:ease-in-out, ease-in-out;
-o-transition-property: top, opacity;
-o-transition-duration: 1s, 1s;
-o-transition-timing-function:ease-in-out, ease-in-out;
transition-property: top, opacity;
transition-duration: 1s, 1s;
transition-timing-function:ease-in-out, ease-in-out;
}
#one {
top: 0px;
background-color: blue;
opacity: 1;
}
#two {
top: 50px;
background-color: green;
opacity: 0;
}
#three {
top: 100px;
background-color: red;
opacity: 0;
}
#container {
width: 50px;
height: 150px;
position: relative;
overflow:hidden;
}
function one() {
document.getElementById('one').style.top = "0px";
document.getElementById('two').style.top = "50px";
document.getElementById('three').style.top = "100px";
document.getElementById('one').style.opacity = "1";
document.getElementById('two').style.opacity = "0";
document.getElementById('three').style.opacity = "0";
}
function two() {
document.getElementById('one').style.top = "-50px";
document.getElementById('two').style.top = "0px";
document.getElementById('three').style.top = "50px";
document.getElementById('one').style.opacity = "0";
document.getElementById('two').style.opacity = "1";
document.getElementById('three').style.opacity = "0";
}
function three() {
document.getElementById('one').style.top = "-100px";
document.getElementById('two').style.top = "-50px";
document.getElementById('three').style.top = "0px";
document.getElementById('one').style.opacity = "0";
document.getElementById('two').style.opacity = "0";
document.getElementById('three').style.opacity = "1";
}
我读的地方不建议从JavaScript更改CSS属性。我认为这是一个不好的做法。我确定必须有更优雅更好的方式来做到这一点。
有什么想法？ (小提琴here)
+1
转换是CSS，而不是HTML5。 –
扫一扫
1632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
