Résumé des façons d'implémenter afficher ou masquer les effets d'animation dans AngularJS

Résumé des façons d'implémenter afficher ou masquer les effets d'animation dans AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:22:34

original

1372 Les gens l'ont consulté

AngularJS est un ensemble de frameworks riches pour créer des applications Web monopage, apportant toutes les fonctionnalités nécessaires pour créer des applications riches et interactives. L'une des fonctionnalités majeures est qu'Angular prend en charge les animations.

Cette expérience utilise AngularJS pour ajouter des effets d'animation entre les deux états « afficher/masquer ».

Réalisez l'effet d'animation afficher/masquer via CSS

Choses :

→npm installer angulaire-animage
→Dépendance : var app = angulaire.module("app",["ngAnimate"]);
→Une variable dans le contrôleur reçoit une valeur booléenne
→Un bouton est prévu dans l'interface, cliquez pour changer la valeur booléenne
→La zone affichée/cachée dans l'interface fournit la liaison ng-if et bool value dans le contrôleur

app.js

var app = angular.module("app",["ngAnimate"]);
app.controller("AppCtrl", function(){
 this.toggle = true;
})

Copier après la connexion

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="styles.css"/>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button class="btn" ng-click="app.toggle=!app.toggle">Toggle Animation</button>
<div class="toggle" ng-if="app.toggle">Some content here</div>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-animate/angular-animate.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Copier après la connexion

styes.css

 .toggle{
 -webkit-transition: linear 1s;
 -moz-transition: linear 1s;
 -ms-transition: linear 1s;
 -o-transition: linear 1s;
 transition: linear 1s;
}
.toggle.ng-enter{
 opacity: 0;
}
.toggle.ng-enter-active{
 opacity: 1;
}
.toggle.ng-leave{
 opacity: 1;
}
.toggle.ng-leave-active{
 opacity: 0;
}

Copier après la connexion

Réalisez l'effet d'animation afficher/masquer grâce à la méthode d'animation

 app.animation("某个类名", function(){
 return {
  leave: function(element, done){
  },
  enter: function(element, done){
  }
 }
})

Copier après la connexion

L'animation peut ajouter des événements de sortie et d'entrée à un certain nom de classe. Comment obtenir des effets d'animation à l'intérieur des fonctions de sortie et d'entrée ? Ceci peut être réalisé via TweenMax.min.js.

app1.js

ar app = angular.module("app",["ngAnimate"]);
app.controller("AppCtrl", function(){
 this.toggle = true;
})
app.animation(".toggle", function(){
 return {
  leave: function(element, done){
   //element.text("nooooo");
   TweenMax.to(element, 1, {opacity:0, onComplete:done})
  },
  enter: function(element, done){
   TweenMax.from(element, 1, {opacity:0, onComplete:done})
  }
 }
})

Copier après la connexion

index1.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="../node_modules/topcoat/css/topcoat-desktop-light.min.css"/>
</head>
<body class="well-lg" ng-app="app" ng-controller="AppCtrl as app">
<button class="topcoat-button--large--cta" ng-click="app.toggle = !app.toggle">点我</button>
<hr/>
<div class="topcoat-notification toggle" ng-if="app.toggle">I'm too your to fade</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-animate/angular-animate.min.js"></script>
<script src="app1.js"></script>
</body>
</html>

Copier après la connexion

Parmi eux, npm install topcoat est une bonne bibliothèque de styles.

Utilisez la directive pour obtenir un effet d'animation afficher/masquer

Est-il possible d'ajouter un attribut à la partie div affichée/masquée, telle que hide-me="app.isHidden" ? L'attribut hide-me surveille app.isHidden et décide de l'afficher en fonction du changement dans valeur.

app3.js

var app=angular.module('app',["ngAnimate"]);
app.controller("AppCtrl", function(){
 this.isHidden = false;
 this.fadeIt = function(){
  //TweenMax.to($("#my-badge"), 1, {opacity:0})
  this.isHidden = !this.isHidden;
 }
})
app.directive("hideMe", function($animate){
 return function(scope, element, attrs){
  scope.$watch(attrs.hideMe, function(newVal){
   if(newVal){
    //TweenMax.to(element, 1, {opacity:0});
    $animate.addClass(element, "fade");
   } else{
    $animate.removeClass(element, "fade");
   }
  })
 }
})
app.animation(".fade", function(){
 return {
  addClass: function(element, className){
   TweenMax.to(element, 1, {opacity:0});
  },
  removeClass: function(element, className){
   TweenMax.to(element, 1, {opacity:1});
  }
 }
})

Copier après la connexion

index3.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button id="my-button" class="btn-primary" ng-click="app.fadeIt()">Click to fade</button>
<div id="my-badge" class="badge" hide-me="app.isHidden">Fade me</div>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-animate/angular-animate.min.js"></script>
<script src="app3.js"></script>
</body>
</html>

Copier après la connexion

Le contenu ci-dessus est un résumé des façons d'afficher ou de masquer les effets d'animation dans AngularJS présentées par l'éditeur. J'espère qu'il vous plaira.