小贝子编程

CSS动画过渡时，jQuery .html()完成



我想要做的是添加一个容器，用内容填充它，然后通过移除类并让CSS通过过渡处理它来使其动画化。这些我都能做，除了动画。我认为这可能是某种竞争条件或类似的东西，因为如果我在移除类时设置setTimeout()，它会动画进来。下面是两个例子的对比:

http://jsfiddle.net/38q7A/3/

<div class="test1">test 1</div>
<div class="container"></div>
CSS

.flyin {
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -ms-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;
     transition: all 1s ease-in-out;
}
.left {
     position: fixed;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
 }
JavaScript

function test1(){
     $(".container").append("<div class='flyin left'></div>");
     $(".flyin").html("this is test content");
     $(".flyin").removeClass("left");
};

我不知道是否改变html是一个选项，但你可以有一个空的左飞元素预生成，只触发动画点击http://jsfiddle.net/uHPmc/1/

<div class="container">
    <div class="left flyin"></div>    
</div>
function test1(){
    $(".flyin").html("this is test content");
    $(".flyin").removeClass("left");
    $(".container").append("<div class='flyin left'></div>");
};

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium