ngshow examples angularjs ng-animate ng-show ng-hide

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