Maison > Article > interface Web > Résumé des façons d'implémenter afficher ou masquer les effets d'animation dans AngularJS_AngularJS

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

WBOYoriginal: 2016-05-16 15:22:341394parcourir

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;
})

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>

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;
}

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){
  }
 }
})

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})
  }
 }
})

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>

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});
  }
 }
})

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation de sauts planifiés vers des pages spécifiées en fonction des compétences JavaScript_javascriptArticle suivant：Implémentation de sauts planifiés vers des pages spécifiées en fonction des compétences JavaScript_javascript

Articles Liés

Voir plus