angularjs - examples - ngshow angular 4
ng-Animate no funciona para una configuraciĆ³n de Ocultar y Mostrar (1)
Estoy usando la versión 1.2.11 de AngularJS. He configurado una barra de herramientas para deslizarse dentro y fuera con una transición usando ng-Animate (mostrar y ocultar)
Aquí está el 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>
Y aquí está el CSS para el mismo elemento de la barra de herramientas.
.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;
}
La animación no funciona y no estoy seguro de si estoy haciendo esto correctamente.
El atributo ng-animate está en desuso en 1.2 y ya no se usa. En cambio, las animaciones ahora están basadas en la clase.
También asegúrese de que está haciendo referencia a angular-animate.js
y que está agregando ngAnimate como un módulo dependiente:
var app = angular.module(''myApp'', [''ngAnimate'']);
Luego nombra sus animaciones, por ejemplo ''fadein'' y ''fadeout'', y las decora con algunas clases adicionales siguiendo una convención de nombres especial que se puede encontrar en la documentation Angular.
Otra buena fuente sobre el tema es Year of moo .
Ejemplo de Fadein:
/* 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;
}
Demostración : http://plnkr.co/edit/V9w2EwUh0unszf62TZZB?p=preview