web-dev-qa-db-ja.com

AngularJSアニメーションカードフリップ

ページ遷移間でアニメーションを実行する新しいAngularJSの方法を使用しようとしていますが、カードフリップを組み込みたいと考えています（ http://jsfiddle.net/nicooprat/GDdtS/ など）

body {
 background: #ccc;   
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
 width: 100%;
 height: 100%;
 position: absolute;
 -webkit-backface-visibility: hidden ;
 z-index: 2;
 font-family: Georgia;
 font-size: 3em;
 text-align: center;
 line-height: 200px;
}
.flip .card .front {
 position: absolute;
 z-index: 1;
 background: black;
 color: white;
 cursor: pointer;
}
.flip .card .back {
 -webkit-transform: rotatex(-180deg);
  background: blue;
  background: white;
  color: black;
  cursor: pointer;
}

そのコードを更新して、ページ遷移のためにAngularJSで機能するようにする方法が少しわかりません。

何かご意見は？

javascriptcssangularjsng-animate
14
Jonovono

これはずっと前のことだと思いますが、私はこれをやっていただけで、JavaScriptは必要ありませんでした。キーはng-classです。これが [〜＃〜] jsfiddle [〜＃〜] です。

重要なのはこの行です

<div class="card" ng-class="{'flipped':isFlipped}" ng-click="isFlipped=!isFlipped">

$ scope.isFlippedがtrueの場合、クラス 'flipped'がカードに割り当てられます。これは私が楽しみのためにまとめた小さなNFLフラッシュカードゲームです。ソースコードをチェックしてください（これはあまりきれいではありません）。このようなことをしている場合に役立つはずです。

NFLフラッシュカード

29
Zack Argyle

ここ は、HTMLから何が起こっているのかがより明確になる代替ソリューションです。具体的には、フリップメカニズムはcssマジックに埋め込まれているのではなく、angularjsにあります。おそらく、CSSの専門家ではない人にとっては簡単にフォローできます。

<div class="card" ng-click="isFlipped=!isFlipped">
    <div class="face front" ng-class="{'flipped':isFlipped}">
        Front
    </div> 
    <div class="face back" ng-class="{'flipped':!isFlipped}">
        Back
    </div> 
</div>
0
J Woodchuck