css3 的transition-property webkitTransform （页面不显示的个人总结）第十节

最新推荐文章于 2023-01-09 18:16:16 发布

lcp_haha

最新推荐文章于 2023-01-09 18:16:16 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/lichuanpeng/article/details/74638446

版权

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，否者这个动画效果是没法做的。

lcp_haha

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 的transition-property webkitTransform （页面不显示的个人总结）第十节

W3School的代码。示例网址：http://www.runoob.com/try/try.php?filename=trycss3_transition-property 菜鸟教程(runoob.com) div{width:100px;height:100px;background:red;transition-property: w
复制链接

扫一扫