Verhindere, dass die Animation beim erstmaligen Laden der Seite abgespielt wird

Question

Ich habe eine einfache rotierende Würfelanimation auf der ng-view Direktive unter Verwendung von ngAnimate mit Angular 1.2 erstellt und habe dieses CSS:

.cube-container {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective:400px;
  height:100%;
}
.cube.ng-enter, 
.cube.ng-leave { 
  -webkit-transition: 0.8s linear all;
}
.cube.ng-enter {
  -webkit-transform-origin: 100% 50%;  
  -webkit-transform: translateX(-100%) rotateY(-90deg);
}
.cube.ng-enter.ng-enter-active {
  -webkit-transform: translateX(0%) rotateY(0deg);
}

.cube.ng-leave {
  -webkit-transform-origin: 0% 50%;
}
.cube.ng-leave.ng-leave-active {
    -webkit-transform: translateX(100%) rotateY(90deg);
}

Die Markup sieht so aus:

Dies funktioniert absolut großartig. Das Problem ist: Wie kann ich verhindern, dass die Animation beim initialen Seitenaufbau abgespielt wird und nur angewendet wird, wenn sich die Route ändert?

Danke!

Answer 1

Sie müssen die Animationsklasse dynamisch anwenden, wie hier gezeigt:

http://jsfiddle.net/J63vD/

Ich glaube, das kann bei jedem Ereignis wie dem Routenwechselereignis gemacht werden.

HTML:

    CSS-animierter Text

CSS:

.css-class-add, .css-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.css-class,
.css-class-add.css-class-add-active {
  color: red;
  font-size:3em;
}

.css-class-remove.css-class-remove-active {
  font-size:1.0em;
  color:black;
}

JavaScript:

angular.module('App', ['ngAnimate']);

Answer 2

Hier ist meine Lösung. Richten Sie nach der Seiteninitialisierung einige Sekunden lang eine Klasse ein und fügen Sie dann diese Klasse zu allen Animations-CSS-Selektoren hinzu. Der Javascript-Beispielcode:

myAppModule.run(function($rootScope, $timeout) {
  $timeout(function() {
    $rootScope.pageInited = true;
  }, 5000)
});

Der HTML-Code:

Sie können die ng-class auf spezifische Tags hinzufügen, die animiert werden sollen.

Dann der CSS-Code, nur auf Animations-CSS hinzufügen:

.page-inited.cube.ng-enter, 
.page-inited.cube.ng-leave { 
  -webkit-transition: 0.8s linear alle;
}