Comment puis-je utiliser ng-animate avec ui-view plutôt que ng-view?
J'utilise angular-ui-router avec angularJS v1.2 et je voudrais implémenter des transitions de page personnalisées.
Comment puis-je utiliser ng-animate avec ui-view (de angular-ui-router ) plutôt que ng-view (ce qui serait la manière standard)? Voir Animation remasterisée dans AngularJS 1.2 pour référence sur ng-view.
EDIT: J'ai essayé deux versions différentes d'angular: v1.2.0-rc.2 et v1.2.0-rc.3 comme suggéré dans les commentaires, mais aucune ne semble faire l'affaire. Je suppose que je fais peut-être quelque chose de mal?
Voici le HTML:
<div ui-view class="slide"></div>
et le CSS:
.slide {
width:1024px;
height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
border: 1px solid blue;
}
.slide.ng-enter.ng-enter-active {
border: 1px solid red;
}
J'ai ajouté un JSfiddle de l'exemple mentionné précédemment. Ce serait bien d'étendre cet exemple pour couvrir ng-view et ui-view, mais je ne sais pas comment obtenir ng/ui-view et les partiels dans JSfiddle.
Le bug est maintenant fermé et ils ont ajouté une entrée sur le ui-router Wiki . Il comprend également une démo Plunkr . Je vais copier l'exemple de code ici, juste au cas où l'URL deviendrait obsolète.
HTML:
<div class="row">
<div class="span12 ui-view-container">
<div class="well" ui-view></div>
</div>
</div>
CSS:
/* Have to set height explicity on ui-view
to prevent collapsing during animation*/
.well[ui-view]{
height: 65px;
}
.ui-view-container {
position: relative;
}
[ui-view].ng-enter, [ui-view].ng-leave {
position: absolute;
left: 0;
right: 0;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
[ui-view].ng-enter {
opacity: 0;
-webkit-transform:scale3d(0.5, 0.5, 0.5);
-moz-transform:scale3d(0.5, 0.5, 0.5);
transform:scale3d(0.5, 0.5, 0.5);
}
[ui-view].ng-enter-active {
opacity: 1;
-webkit-transform:scale3d(1, 1, 1);
-moz-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1);
}
[ui-view].ng-leave {
opacity: 1;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
[ui-view].ng-leave-active {
opacity: 0;
-webkit-transform:translate3d(100px, 0, 0);
-moz-transform:translate3d(100px, 0, 0);
transform:translate3d(100px, 0, 0);
}
On dirait que cela est corrigé avec UI Router 0.2.8. J'utilise AngularJS v1.2.7.
Pour un exemple, ajoutez simplement la classe "slide" à votre interface utilisateur
<div ui-view class="slide">
Et utilisez le css suivant pour votre animation.
.slide {
-webkit-transition: -webkit-transform .7s ease-in-out;
-moz-transition: -moz-transform .7s ease-in-out;
-o-transition: -o-transform .7s ease-in-out;
transition: transform .7s ease-in-out;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide.ng-enter {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide.ng-enter.ng-enter-active, .slide.ng-leave {
position: absolute;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
De plus, certaines animations semblaient avoir un comportement étrange à cause de $ uiViewScroll. J'ai travaillé dessus en ajoutant autoscroll = "false" à mon élément ui-view.
Je viens de publier un tutoriel avec une démo fonctionnelle pour utiliser ngAnimate (1.4.8) avec UI Router.
Il montre quelques animations de vue différentes, une transition en fondu sur la vue principale et une transition d'entrée/sortie de diapositive sur une vue imbriquée.
Voici un extrait du fichier LESS pour le fondu en transition sur la vue principale:
main {
/* start 'enter' transition */
&.ng-enter {
/* transition on enter for .5s */
transition: .5s;
/* start with opacity 0 (invisible) */
opacity: 0;
}
/* end 'enter' transition */
&.ng-enter-active {
/* end with opacity 1 (fade in) */
opacity: 1;
}
}
Au cours du week-end, j'ai créé deux plunks démontrant des animations de vue pour les deux ui-view et ng-view
ui-view: http://plnkr.co/edit/jpebBk?p=preview
ng-view: http://plnkr.co/edit/LQhVYU?p=preview
angular-ui-router 0.2.8 est venu avec des correctifs pour les principaux bugs d'animation de vue
Évitez le nom view pour named-views ou id pour cet élément.
Par exemple, s'il s'agit de votre html
<div id="home-page" ui-view="home">
<!-- THIS IS WHERE YOUR TEMPLATE WILL BE LOADED -->
</div>
Au lieu de:
/*AVOID*/
div#home-page[ui-view="home"].ng-enter {
/*ENTER STYLES*/
}
div#home-page[ui-view="home"].ng-enter-active {
/*...ENTER-ACTIVE-STYLES*/
}
Essayer:
div[ui-view].ng-enter {
/*...ENTER-STYLES*/
}
div[ui-view].ng-enter-active {
/*...ENTER-ACTIVE-STYLES*/
}
Bonne chance.
Au cas où quelqu'un voudrait utiliser animate.css avec Angular et I-Router , on pourrait simplement le faire ci-dessous. Notez que cela n'a été testé qu'en utilisant Angular 1.2.21 et UI-Router 0.2.10.
Exemple d'utilisation de FadeInDown comme animation d'entrée et FadeOutDown comme animation de sortie. Échangez simplement le nom de l'animation pour toute animation de animate.css. Vous pouvez également vouloir mettre cela dans un conteneur div avec la position définie sur relative.
HTML:
<div data-ui-view class="fade"></div>
CSS:
.fade.ng-enter, .fade.ng-leave {
position: absolute;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.fade.ng-enter {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.fade.ng-leave {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
Un autre exemple utilisant à la place bounceInDown et bounceOutDown :
HTML:
<div data-ui-view class="bounce"></div>
CSS:
.bounce.ng-enter, .bounce.ng-leave {
position: absolute;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.bounce.ng-enter {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
.bounce.ng-leave {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
EDIT: fait un fork de @ kamweti Plunker pour visualiser l'exemple avec animate.css.
Utilisation d'AngularMotion https://github.com/mgcrea/angular-motion puis ajoutez simplement ceci à votre CSS ...
div[ng-view].ng-leave-active {
display: none !important;
}
Ajoutez votre animation à la classe (am-fade dans mon cas) de votre div ng-view
Comme quelqu'un l'a dit dans le post. il y a une angular 1.2 branche du routeur qui a des correctifs qui le font fonctionner. Je sais pertinemment que l'utilisation de Angular 1.2.6 ng-animate 1.2 .6 et ma version spéciale ui-router de la branche 0.2.0 beta 1.2 fonctionne ... en atténuant les vues ui .. en dedans et en dehors.
le problème est que vous devez "construire" la branche beta angular .. vous ne pouvez pas simplement télécharger une archive tar depuis git et cela fonctionne .. vous devez la télécharger. puis CONSTRUIRE il. alors vous aurez un ui-routeur personnalisé. regardez votre en-tête ui-routeur en javascript. le mien dit ceci ..
/**
* State-based routing for AngularJS
* @version v0.2.0-dev-2013-10-05
* @link http://angular-ui.github.com/
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
est votre version 0.2.0-dev-2013-10-05? cette date est la date à laquelle j'ai compilé la mienne. donc votre date devrait être pertinente pour la vôtre .. si vous ne voyez pas que dans votre en-tête de votre javascript alors vous utilisez simplement la même version 0.2.0 que le maître, vous n'utilisez rien de spécial pour faire fonctionner les animations 1.2 ...
voici un pastbin du routeur ui compilé qui fonctionne avec 1.2 essayez-le. BOOM!