J'ai jeté un coup d'œil à l'exemple de transition/masquage officiel au bas de cette page ... http://docs.angularjs.org/api/ng.directive:ngShow
J'ai essayé de le modifier pour obtenir une transition de fondu sans faille (transition: opacité 0,5 seconde), d'une div à l'autre, les deux div occupant exactement la même position sur la page, de sorte qu'un div disparaît complètement. avant que l'autre div commence à se fondre.
Dans jQuery, ce serait aussi simple que:
$("#divA").fadeOut(function() { $("divB").fadeIn(); });
Quelqu'un a-t-il des conseils sur le meilleur moyen d'y parvenir de manière angulaire, par rapport à l'exemple lié, qui utilise un seul modèle "vérifié" pour déclencher la transition?
J'ai utilisé l'exemple de ngShow pour créer le suivant jsfiddle basé sur angular1.2.0-rc.3.
Le code html:
<div ng-app="App">
Click me: <input type="checkbox" ng-model="checked"><br/>
<div class="check-element animate-show" ng-show="checked">
<span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
<div class="check-element animate-show" ng-hide="checked">
<span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
</div>
</div>
Les styles CSS
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
display:block!important;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
line-height:0;
opacity:0;
padding:0 10px;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}
.check-element {
padding:10px;
border:1px solid black;
background:white;
}
Et enfin le code JavaScript, n'oubliez pas d'inclure les bibliothèques angular.js
et angular-animate.js
angular.module('App', ['ngAnimate']);
J'espère que ça t'aide ;)
En utilisant le module ngAnimate , vous pouvez le faire en CSS pur avec la directive -transition-delay
:
HTML
<body ng-app="ngAnimate">
Click me: <input type="checkbox" ng-model="checked">
<br/>
<img ng-show="checked" src="img1.jpg">
<img ng-hide="checked" src="img2.jpg">
</body>
CSS
img {
position: absolute;
}
.ng-hide-add-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.ng-hide-remove-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.ng-hide {
opacity: 0;
}
Vous pouvez utiliser ng-animate en conjonction avec ng-show ( http://docs.angularjs.org/api/ngAnimate ), disponible sur Angular 1.1.4. Ou bien, appliquez simplement une classe show
lorsque le modèle est coché et appliquez votre spectacle et votre animation à la classe.
<label><input type="checkbox" ng-model="showElement" />Show div</label>
<div ng-class="{show: showElement}"></div>