J'utilise ng-animate pour faire glisser les vues de l'application, chaque route glisse sa vue propre, c'est mon code simple: html: css: maintenant, je me demande, dans d'autres termes: Toute façon d'exclure un itinéraire de NG-Animate ? Y a-t-il de toute façon exclure la page d'accueil (route principale "/") de glissement?
7 Réponses :
Pourquoi ne faites-vous pas simplement ajouter une classe racine comme Vous pouvez définir votre contrôleur comme celui-ci: P> class = "non animé" code> et class = "animé" code> aux contrôleurs que vous ne voulez pas ou Voulez-vous être animé?
De cette façon, vous pouvez utiliser le .not-animé code> et .nanimated code> classe pour jouer avec votre animation dans différents contrôleurs. <body ng-controller="MainCtrl" ng-class="isAnimated" class="ng-scope not-animated">
<p class="ng-binding">Hello World!</p>
<div ng-controller="FirstCtrl" ng-class="isAnimated" class="ng-scope not-animated">Foo</div>
<div ng-controller="SecondCtrl" ng-class="isAnimated" class="ng-scope animated">Bar</div>
</body>
Tu veux dire créer un Crontoller pour la principale animée Div?
J'ai mis en place un plumiste rapide pour démontrer ce que je veux dire. Bien sûr, vous n'avez pas besoin d'appliquer partout, vous pourriez le configurer à l'endroit où vous en avez besoin.
Vous pouvez ajouter la classe NG lorsque vous ajoutez l'animation, mais peut-être que cela pourrait être un peu verbeux.
Hé là désolé je suis vraiment débutant sur angulaire et ma question demandait une meilleure pratique que j'ai donné +1 à vous tous, mais je suis en difficulté à laquelle la réponse à accepter cause IMO est toutes de bonnes solutions
Vous pouvez créer un contrôleur qui écoute les changements d'itinéraire et définit une classe en conséquence. Vous serez alors en mesure de cibler l'animation correcte à l'aide de CSS.
<body ng-controller="TranisitionCtrl" ng-class="currentRoute">
<div ng-view ng-animate></div>
</body>
app.controller('TranisitionCtrl', function($scope) {
$scope.$on('$routeChangeStart', function(ev, next, current) {
$scope.currentRoute = current.name;
});
});
Hé là désolé je suis vraiment débutant sur angulaire et ma question demandait une meilleure pratique que j'ai donné +1 à vous tous, mais je suis en difficulté à laquelle la réponse à accepter cause IMO est toutes de bonnes solutions
Souhaitez-vous élaborer sur $ ROUTCHANGANGESTART étant modifié en $ EmplacementChangestart dans Angular récent? J'étais sous l'impression qu'ils gèrent différentes parties de l'événement Logic-local étant licencié pour un changement d'URL lors de l'événement d'itinéraire pour un point de vue différent basé sur cet endroit, bien qu'ils ne soient pas nécessairement inclusifs dans toutes les circonstances.
C'est ce que Vous pouvez définir une variable à large application $ Rootscope.Path à chaque fois que le chemin change. Ensuite, vous décidez de définir votre classe d'animation par cette variable si vous souhaitez définir la classe En faisant ainsi, vous n'avez pas besoin de toucher l'un de votre contrôleur. La démo complète est ici, http://plnkr.co/edit/rmu8oc7yckzraa2zv5jn?p= Aperçu D'ailleurs, cela utilise une version angularjs currant, 1.2.7 ------- Modifier (Animate après la visite de la page principale) --- --- NG-Class est destiné. diapositive Seulement si Le chemin n'est pas / , faites comme suit ce
J'aime vraiment votre Sollution, pensez-vous simplement qu'il est possible de faire exactement la même chose, mais uniquement sur la première application de l'application? Je veux dire seulement 1 fois, seulement lorsque l'application est ouverte pour la première fois ...
Oui, mais ce n'était pas une partie de votre question qui ne pas glisser lorsque l'application charge
J'ai édité la réponse pour ne pas animer lorsque l'application se charge. Donc, veuillez éditer votre question en conséquence afin que les téléspectateurs puissent voir des réponses suivent votre question.
Hé là désolé je suis vraiment débutant sur angulaire et ma question demandait une meilleure pratique que j'ai donné +1 à vous tous, mais je suis en difficulté à laquelle la réponse à accepter cause IMO est toutes de bonnes solutions
Un moyen d'exclure un itinéraire spécifique de l'animation consiste à utiliser une enveloppe d'animation JS qui prendra le réglage de la classe d'animation pour votre Voici un échantillon JS Wrapper qui vérifie un voici le plunker de travail: NG-View . Vous avez besoin d'une classe supplémentaire pour gérer le non-animé ng-laissez lorsque vous revenez à la route non animée. personnalisé Animate Attribut de votre itinéraire Pour décider si un itinéraire est animé ou non:
http://plnkr.co/edit/ldcy9cfz2ljwnulzdibp?p=preview
Hé là désolé je suis vraiment débutant sur angulaire et ma question demandait une meilleure pratique que j'ai donné +1 à vous tous, mais je suis en difficulté à laquelle la réponse à accepter cause IMO est toutes de bonnes solutions
Emprunter à partir de @allenhwkim, obtenez le chemin dans votre rootscope.
<div ng-view ng-animate ng-class="{slide: path !== '/' }"></div>
Pouvez-vous fournir un PLNKR de travail, car je n'ai pas vu ng-animate directive dans la documentation officielle.
Je semblais avoir pensé à angular 1.1.x tout en écrivant ma réponse - une erreur. J'ai mis à jour ma réponse à la convivialité 1.2.9 angulaire.
Depuis ma solution impliquait ce que @allenhwkim à l'origine, je prépare sa réponse.
Hé là désolé je suis vraiment débutant sur angulaire et ma question demandait une meilleure pratique que j'ai donné +1 à vous tous, mais je suis en difficulté à laquelle la réponse à accepter cause IMO est toutes de bonnes solutions
Je pense que cela devrait aller à Allenhwkim, car ma solution a fini par être celle qu'il affichait à l'origine, qui, je pense, est la plus élégante.
Nul besoin de créer un contrôleur, une directive ou un changement de toute logique commerciale. Il suffit d'utiliser écoute Si la vue cible Si une vue HTML P> méthode code> pour ajouter une animation conditionnelle à .Slide code>. P> $ roulettes code> Evénement sur $ rootscope code>. Cet événement sera déclenché avant le début de l'animation, vous avez donc le temps de définir toroot code> et fromoot code> drapeau en conséquence. Si la vue cible n'est pas une vue NG-View code> élément, donc la transition CSS définie sera effectué. p> app.animation('.slide', function($rootScope, $animate) {
var toRoot = false;
var fromRoot = false;
$rootScope.$on('$routeChangeSuccess', function(event, current, old) {
toRoot = (current.$$route.originalPath === '/');
fromRoot = (old.$$route.originalPath === '/');
});
return {
enter: function(element, done) {
if (!toRoot) {
element.addClass('enable-animation');
}
done();
},
leave: function(element, done) {
if (!fromRoot) {
element.addClass('enable-animation');
done();
} else {
// set 1000ms timeout to sync with CSS animation
// otherwise leaving ng-view element will be removed before entering ng-view is in position
setTimeout(done, 1000);
}
}
}
});
Hé là désolé je suis vraiment débutant sur angulaire et ma question demandait une meilleure pratique que j'ai donné +1 à vous tous, mais je suis en difficulté à laquelle la réponse à accepter cause IMO est toutes de bonnes solutions
Autant que je comprenne, ce que vous voulez, qu'aucune animation ne se produit si l'utilisateur frappe votre site. Mais après cela, les animations devraient arriver tout le temps. Ceci est la solution la plus courte que je connaisse:
Utilisez le module dans votre contrôleur qui est lié à votre contrôleur Exécuter pour désactiver toutes les animations: / Renable aux animations, mais retardé pour un cycle de digère:
Hé là désolé je suis vraiment débutant sur angulaire et ma question demandait une meilleure pratique que j'ai donné +1 à vous tous, mais je suis en difficulté à laquelle la réponse à accepter cause IMO est toutes de bonnes solutions
Avez-vous pu comprendre cela?
@Pavelnikolov Nope toujours à la recherche d'une bonne solution
Je ne pense pas que
ng-animate fera n'importe quoi ici, il n'y a aucune information surng-animate directive dans le document officiel. J'ai également mis à jour ma réponse pour refléter la dernière demande de @sbaaaang.Hé là désolé je suis vraiment débutant sur angulaire et ma question demandait une meilleure pratique que j'ai donné +1 à vous tous, mais je suis en difficulté à laquelle la réponse à accepter cause IMO est toutes de bonnes solutions