Para crear un efecto de animación en Angular.Js usando el módulo ngAnimate, que brinda soporte para animaciones basadas en CSS.
La animación es algo que se utiliza para dar un efecto de movimiento dinámico. Aquí HTML se transforma para dar una ilusión de movimiento utilizando el módulo ngAnimate que nos brinda un efecto combinado de Javascript y CSS.
Usando este código de muestra, la demostración de ocultar la división/sección se muestra al marcar la casilla de verificación.
Pasos para traer Animación usando AngularJs a la imagen:
- Incluya Angular.Js animate lib en la etiqueta del script como:
src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js”
- Consulte el módulo ngAnimate dentro de la etiqueta del cuerpo como:
ng-app=”ngAnimar”
- El módulo ngAnimate agrega y elimina clases. Las directivas utilizadas en AngularJS que agregan/eliminan clases son:
ng-mostrar, ng-ocultar
Ejemplos: a continuación se muestra la implementación de la animación Angular.Js.
<html>
<style>
div {
transition: 0.6s;
border-radius: 500%;
height: 250px;
width: 250px;
background-color: red;
display: inline-block;
}
.ng-hide {
background-color: yellow;
top: 5px;
left: 100px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js">
</script>
<body ng-app="ngAnimate">
<h1>Hide the Circle
<input type="checkbox"
ng-model="myCheck">
</h1>
<div ng-hide="myCheck"></div>
</body>
</html>
Salida:
Antes:
Después:
Publicación traducida automáticamente
Artículo escrito por Pritesh Ranjan 1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA