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

Question

我的上下文 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”？

Answer 1

尝试这个

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

Answer 2

您不需要为此删除任何内容，也不需要 Javascript：

html标记：

<div class="container">
    <div class="cart">
         <div class="black">Black side</div>
         <div class="white">White side</div>
    </div>
</div>

CSS：

.cart div {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
}
.cart .black {
    background:#111;
    color:white;
}
.cart .white {
  -webkit-transform: rotateY(180deg);
  color: black;
  background: #eee;
}

现在您可以简单地应用您的效果：

.container:hover .cart {
  -webkit-transform: rotateY(180deg);
}

查看演示