W3School的代码。示例网址:
http://www.runoob.com/try/try.php?filename=trycss3_transition-property
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property: width;
transition-duration: 2s;
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>注意:</b> 该属性不兼容 IE9以及更早版本的浏览器.</p>
<div></div>
<p>鼠标移动在块上查看动画效果.</p>
</body>
不同浏览器。
div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
。
具体的使用:
div.style.left = window.innerWidth + window.pageXOffset + "px";
div.style.webkitTransitionProperty = "-webkit-transform";
定义上面的属性。(this.element =div)
显示element
this.element.style.webkitTransitionTimingFunction = "ease-out";
this.element.style.webkitTransitionDuration = "400ms";
var width = window.innerWidth + window.pageXOffset + "px";
this.element.style.webkitTransform = "translate3d(-" + width + ", 0, 0)";
退出element:
this.element.style.webkitTransitionTimingFunction = "ease-in";
this.element.style.webkitTransitionDuration = "500ms";
this.element.style.webkitTransform = "translate3d(0, 0, 0)";
this.element.addEventListener("webkitTransitionEnd", this, false)
作者按照上面属性设置:没有什么问题吧。但是作者的界面始终不出来后来发现
DIV的STYLE的CSS中有属性控制了。
是不是样式的问题了,作者和以前的比对返现缺少了。position:absolute Z-index 而多了 overflow:hidden;属性。
于是作者尝试。没有position的属性的时候,页面直接白色,不显示。但是有position,无论是absolute还是relative均显示了页面。
另外:overflow:hidden 添加和去掉,作者都看到没有实际的效果。而z-index也是如此。
因此作者总结的经验是:用到属性webkitTransform 的时候必须知道页面的position,否者这个动画效果是没法做的。