Carte d'animation AngularJS
Je suis en train d'utiliser la nouvelle AngularJS façon de faire des animations entre les transitions de page et souhaitez intégrer une carte flip (comme 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;
}
Je suis juste un peu de doute sur la mise à jour de code pour le faire fonctionner avec AngularJS pour une transition de page.
Toutes les pensées?
source d'informationauteur Jonovono
Vous devez vous connecter pour publier un commentaire.
J'ai réalisé que c'était il y a longtemps, mais je ne faisais que cela, et il a eu zéro javascript. La clé est de ng-classe. Voici une JSFIDDLE.
La clé est de cette ligne
Il va céder à la classe "basculé" à la carte lors de l' $champ d'application.isFlipped est vrai. Ici, c'est un peu de la NFL flash cartes jeu j'ai mis ensemble pour le plaisir. Découvrez le code source (qui n'est pas super jolie), il devrait être utile si vous faites quelque chose comme cela.
NFL Cartes Flash