AngularJS_AngularJS でアニメーション効果の表示または非表示を実装する方法のまとめ-jsチュートリアル-php.cn

AngularJS_AngularJS でアニメーション効果の表示または非表示を実装する方法のまとめ

WBOY

リリース： 2016-05-16 15:22:34

オリジナル

1425 人が閲覧しました

AngularJS は、単一ページの Web アプリケーションを作成するための豊富なフレームワークのセットであり、リッチでインタラクティブなアプリケーションの構築に必要なすべての機能を備えています。主要な機能の 1 つは、Angular がアニメーションをサポートしていることです。

このエクスペリエンスでは、AngularJS を使用して、「表示/非表示」の 2 つの状態の間にアニメーション効果を追加します。

CSS によるアニメーションの表示/非表示を実現

もの:

→npm install angular-animage
→依存関係: var app = angular.module("app",["ngAnimate"]);
→コントローラー内の変数がブール値を受け取ります
→インターフェイスにボタンが表示されます。クリックしてブール値を変更します
→インターフェースの表示/非表示領域は、コントローラーでの ng-if と bool 値のバインディングを提供します

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>

ログイン後にコピー

ものもらい.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;
}

ログイン後にコピー

アニメーションメソッドによりアニメーション効果の表示/非表示を実現

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

ログイン後にコピー

アニメーションでは、leave および enter イベントを特定のクラス名に追加できます。leave および enter 関数内でアニメーション効果を実現するにはどうすればよいですか?これは、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>

ログイン後にコピー

その中でも、npm install topcoat は優れたスタイルライブラリです。

ディレクティブを使用してアニメーション効果の表示/非表示を実現します

Hide-me="app.isHidden" などの表示/非表示の div 部分に属性を追加することはできますか? Hide-me 属性は app.isHidden を監視し、その変更に基づいて表示するかどうかを決定します。価値。

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>

ログイン後にコピー

上記の内容は、編集者が紹介した AngularJS でのアニメーション効果を表示または非表示にする方法をまとめたものです。