angularjs enchaîné fade-in / fade-out de transition

J'ai regardé le officiel afficher/masquer la transition exemple au bas de cette page... http://docs.angularjs.org/api/ng.directive:ngShow

J'ai essayé de le modifier pour obtenir un sans heurt de fondu de transition (transition: opacity 0,5 s ease-in-out) d'un div à l'autre, où les deux divs occupent la même position sur la page, de sorte que la div s'estompe complètement avant de les autres div commence à s'estomper.

En jquery, il devrait être aussi simple que:

$("#divA").fadeOut(function() { $("divB").fadeIn(); });

Quelqu'un aurait-il des conseils sur la meilleure façon d'atteindre cet angulaire, à l'égard lié exemple, qui utilise un modèle unique "checked" pour déclencher la transition?

Je pense que j'ai besoin de plus d'infos... ce qui pourrait déclencher les effets de fading? Pouvez-vous donner un exemple d'utilisation de plus d'un exemple de code?
Je pourrais, mais je pense que je peux décrire, en référence à l'exemple dans le lien. Dans cet exemple, les deux animation des divs avec l'class="check-élément d'animation spectacle" attribut, ils animent en même temps (c'est à dire qu'ils sont à la fois visibles alors qu'ils sont à l'animation). Un scénario très commun je faire usage de jquery est de fade-out/masquer le premier div, et une fois que ses masqué, c'est fade-in/afficher la deuxième div dans le même emplacement sur la page. En d'autres termes, à proprement fade-out de certains contenus et puis fondu dans le remplacement de contenu avec un seul du contenu divs visible à n'importe quel point dans le temps.
Avez-vous utilisé l'un de ces réponses? Si oui, vous devriez accepter la réponse choisie.

OriginalL'auteur user2754486 | 2013-10-25

J'ai utilisé l'exemple de la ngShow la 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 cela vous aide à vous 😉

A cette réponse?
Tout d'abord, merci pour le code. Deuxièmement, à la réflexion, définissant des styles css est exactement pourquoi les développeurs préfèrent un "fadeOut" de la fonction. De sorte que nous n'avons pas à plonger dans le CSS. Je me rends compte que beaucoup sont contre l'inclusion de jQuery côtés Angularjs, mais pour éviter de style personnalisé, il semble que cela peut être nécessaire.

OriginalL'auteur Adrian

À l'aide de la ngAnimate module, vous pouvez le faire en pure CSS avec le -transition-delay directive:

Plunker

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;
}

Tout simplement génial!
Nécessite position:absolute malheureusement. Peut-être pas la meilleure solution pour les pages complexes.
Juste utilisé ce pour les 2 divs occuper le même espace - fonctionne comme un charme!

OriginalL'auteur rphv

0

Vous pouvez utiliser ng-animer en collaboration avec ng-show (http://docs.angularjs.org/api/ngAnimate), disponible à partir Angulaire 1.1.4. Ou bien tout simplement appliquer un show classe lorsque le modèle est coché et appliquer votre spectacle et de l'animation de la classe.
```
<label><input type="checkbox" ng-model="showElement" />Show div</label>
<div ng-class="{show: showElement}"></div>
```
Merci pour la réponse, mais pensez que vous avez manqué le point. Le problème n'est pas comment appliquer une animation pour le spectacle, c'est le fait que deux animations (un cacher et un spectacle) sont déclenchées à partir de la même élément de modèle, et les animations ont besoin pour s'exécuter en série, pas en même temps. Masquer l'animation doit s'exécute à l'achèvement de la première, et le spectacle de l'animation. Est-ce possible?
Ah je vois, j'avais l'adresse que par la mise en ng-classe à partir d'une fonction, la mauvaise mise à jour de mon exemple.

OriginalL'auteur eddiec

Vous devez vous connecter pour publier un commentaire.