ホームページ > 記事 > ウェブフロントエンド > AngularJS_AngularJS でアニメーション効果の表示または非表示を実装する方法のまとめ
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 でのアニメーション効果を表示または非表示にする方法をまとめたものです。