0

私のコンテキスト 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」にフリップ アニメーションを含む新しい要素を追加するにはどうすればよいですか?

4

2 に答える 2

0

そのためのコンテンツを削除する必要はなく、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);
}

デモを見る

于 2013-02-20T10:51:25.690 に答える
0

これを試して

 $(".cart").html('').append(whiteEl);
 //since you have already appended the created div here.. you can use class selctor.
 $('.white').addClass("flipanim");
于 2013-02-20T10:07:06.147 に答える