webkit - div 上的 css 过渡效果

发布于 2024-10-09 19:55:48 字数 701 浏览 4 评论 0原文

当我更改 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>

请在这里帮助我

原文

I am trying to do fadein/out effect when I change innerHTML of a div. Even tried example given at safari doc

I want the div to fade-out, change the contents and then fade-in again with new content.

<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>

Please help me here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九厘米的零° 2024-10-16 19:55: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>

<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>

回复收藏 0 原文

梦境 2024-10-16 19:55:48

我重写了你的代码 - 请参阅 http://jsfiddle.net/Kai/ec64b/

我还包括一些类操作函数供您使用。

回复收藏 0 原文

倒数 2024-10-16 19:55:48

<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> 
<script> 
var c = document.getElementById("c");
c.setAttribute("class", "cf");
// c.innerHTML = '';
// c.appendChild(fragment);
c.setAttribute("class", "cv");
</script>
</body>

试试这个代码。将脚本放在正文结束标记之前，而不是之后。

<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> 
<script> 
var c = document.getElementById("c");
c.setAttribute("class", "cf");
// c.innerHTML = '';
// c.appendChild(fragment);
c.setAttribute("class", "cv");
</script>
</body>

Try out this code. Put script before body closing tag, not after.

回复收藏 0 原文

扮仙女 2024-10-16 19:55:48

这就是我最终完成的事情。谢谢大家的回答

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;
     },

This is what I finally ended doing. Thank you all for the answers

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;
     },

回复收藏 0 原文

~没有更多了~