wake-up-neo.com

ng-Animate funktioniert nicht für eine Einstellung zum Ausblenden und Anzeigen

Ich verwende AngularJS Version 1.2.11. Ich habe eine Symbolleiste zum Ein- und Ausblenden mit einem Übergang mit ng-Animate (ein- und ausblenden) eingerichtet.

Hier ist das HTML:

 <div>
  <div class="full-height">
    <menu-main class="full-height pull-left"></menu-main>
    <menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
    </menu-sub>
  </div>
</div>

Und hier ist das CSS für das gleiche Symbolleistenelement

.animate.fade-hide, .animate..fade-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
}
.animate.fade-hide, {
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-hide, .animate.fade-hide-active 
{
    position: fixed;
    top: 500px;
    opacity: 0.3;
}
.animate.fade-show {
    position: fixed;
    top: 100px;
        opacity: 1;
}
.animate.fade-show, .animate.fade-show-active {
    position: fixed;
    top: 100px;
        opacity: 1;
}

Die Animation funktioniert nicht und ich bin mir nicht sicher, ob ich das richtig mache.

angularjsng-animateng-showng-hide
22
Sandeep

Das Attribut ng-animate ist in 1.2 veraltet und wird nicht mehr verwendet. Stattdessen sind Animationen jetzt klassenbasiert.

Stellen Sie außerdem sicher, dass Sie auf angular-animate.js Verweisen und ngAnimate als abhängiges Modul hinzufügen:

var app = angular.module('myApp', ['ngAnimate']);

Anschließend benennen Sie Ihre Animationen, zum Beispiel 'Fadein' und 'Fadeout', und dekorieren sie mit einigen zusätzlichen Klassen gemäß einer speziellen Namenskonvention, die in der Dokumentation Angular documentation .

Eine weitere gute Quelle zu diesem Thema ist Year of moo .

Fadein Beispiel:

/* After the transition this will be the only class remaining */
.fadein {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  opacity: 1; /* Default value but added for clarity */
}

/* Initial state when showing */
.fadein.ng-hide-remove {
  opacity: 0;
  display: block !important;
}

/* Will transition towards this state */
.fadein.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}

Demo : http: //plnkr.co/edit/V9w2EwUh0unszf62TZZB? P = preview

51
tasseKATT