javascript - 如何使用css3翻转并更改元素？

我的背景
的HTML

<div class="cart">
     <div class="black"></div>
</div>

JS

var whiteEl="<div class="white"></div>";
//I would like to replace black with white, flip animation.
$(".cart").empty().append(whiteEl);
whiteEl.addClass("flipanim");

的CSS

@-webkit-keyframes flip{
    from{
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(180deg);
    }
  }
     /*
similar cross browser code*/

.flipanim{
    -webkit-animation: flip 1s 1;
    -moz-animation:flip 1s 1;
    -o-animation:flip 1s 1;
    animation:flip 1s 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
   transition: all .5s;
}

我将关键帧动画用于显示转换动画。

并在javascript中将类添加到附加元素。

我的动画不起作用。

如何将带有翻转动画的新元素添加到“ .cart”？

最佳答案

尝试这个

 $(".cart").html('').append(whiteEl);
 //since you have already appended the created div here.. you can use class selctor.
 $('.white').addClass("flipanim");

关于javascript - 如何使用css3翻转并更改元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14976999/