webkit - div上的css过渡效果
webkit - div上的css过渡效果
提问于 2010-12-30 10:45:51
当我改变一个div的innerHTML时，我试图做淡入/淡出效果。甚至在safari doc上给出了尝试过的例子
我希望div淡出，更改内容，然后用新内容再次淡入。
<style>
.cv { background-color: #eee; -webkit-transition: all 1s ease-in-out;}
.cf {opacity: 0;}
</style>
<body>
<div id="main">
<div id="c"> OLD </div>
</div>
</body>
<script>
var c = document.getElementById("c");
c.setAttribute("class", "cf");
c.innerHTML = '';
c.appendChild(fragment);
c.setAttribute("class", "cv");
</script>请帮帮我
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-01-01 01:50:16
这就是我最终结束做的事情。感谢所有人的回答
init: function(fragment) {
var c = document.getElementById("c");
c.addEventListener( 'webkitTransitionEnd', IDR.callHook(c, fragment), false);
c.setAttribute("class", "cv hide");
},
callHook: function(c, fragment) {
var fp = function() {
c.removeEventListener('webkitTransitionEnd', fp, false);
c.innerHTML = '';
c.setAttribute("class", "cv");
c.appendChild(fragment);
};
return fp;
},Stack Overflow用户
发布于 2010-12-30 23:33:48
<style>
.cv { opacity:1; background-color: #eee; -webkit-transition: all 1s ease-in-out;}
.cv.hide {opacity: 0;}
</style>
[...]
<script>
c.setAttribute("class", "cv hide");
[...]
c.setAttribute("class", "cv");
</script>Stack Overflow用户
发布于 2010-12-30 23:54:51
我重写了你的代码--参见http://jsfiddle.net/Kai/ec64b/
我还提供了一些类操作函数供您使用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4559634
复制相关文章
相似问题
腾讯云开发者
