Je suis nouveau à ngAnimate et j'essaye d'accomplir quelque chose de vraiment simple.AngularJS ng-show avec animation de fondu
Afficher div1 et masquer div2 lorsqu'un bouton est cliqué (j'ai réussi à le faire). Et afficher une animation de fondu quand un div quitte/montre (je n'ai pas réussi à le faire)
Et je ne veux pas montrer les deux div en même temps quand il quitte/spectacles.
J'ai préparé un JSFIDDLE
Voici le code
HTML
<body ng-controller="AniCtrl as test" >
<div ng-app="app" ng-init="visibleDiv='div1'">
<md-button ng-click="visibleDiv='div1';test.showBoxOne = !test.showBoxOne">Div 1</md-button>
<md-button ng-click="visibleDiv='div2';test.showBoxOne = !test.showBoxOne">Div 2</md-button>
<section>
<div ng-show="visibleDiv == 'div1'" flex>
<div class="box" ng-show="test.showBoxOne">
<p>This is Div 1</p>
</div>
</div>
<div ng-show="visibleDiv == 'div2'" id="div2" flex>
<div class="box" ng-show="test.showBoxOne">
<p>This is Div 2</p>
</div>
</div>
</section>
</div>
</body>
JS
angular.module('app', ['ngMaterial', "ngAnimate"]);
app.controller('AniCtrl', AniCtrl);
function AniCtrl() {
var self = this;
self.showBoxOne = false;
self.showBoxTwo = false;
}
CSS
.box{
background-color:black;
color:white;
border:1px solid red;
}
.box-one {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.box-one.ng-hide {
opacity:0;
/* transform: scale(0.8); */
}
Merci à l'avance
Merci beaucoup, cela fonctionne comme je le voulais. Je ne savais pas que vous deviez utiliser css pour ng-hide, c'est utile- – DPF
EDIT: J'ai juste remarqué, que le ng-init ne fonctionne pas. Je veux montrer d'abord sans avoir besoin de cliquer, div1 Savez-vous pourquoi? – DPF
@DPF La variable 'test.showBoxOne' n'a pas été initialisée! Pouvez-vous revérifier ma réponse? –