[AngularJS] ngAnimate using Javascript. 2
JavaScript Using angularjs
2023-09-14 08:59:21 时间
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>Egghead Videos</title> <link rel="stylesheet" href="./foundation.min.css"> <link rel="stylesheet" href="./topcoat-desktop-light.min.css"> <script type="text/javascript" src="./angular.min.js"></script> <script type="text/javascript" src="./angular-animate.min.js"></script> <script type="text/javascript" src="./app.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script> </head> <body ng-app="app" ng-controller="AppCtrl as app"> <body class="well-lg" ng-app="app" ng-controller="AppCtrl as app"> <button class="topcoat-button--large--cta" ng-click="app.toggle=!app.toggle">Goodbye, fair notification</button> <hr/> <div class="topcoat-notification toggle" ng-if="app.toggle" id="d1">I'm too young to fade! :(</div> </body> </html>
.toggle { -webkit-transition: linear 0.75s; -moz-transition: linear 0.75s; -ms-transition: linear 0.75s; -o-transition: linear 0.75s; transition: linear 0.75s; } .toggle.ng-enter { opacity: 0; } .toggle.ng-enter-active { opacity: 1; } .toggle.ng-leave { opacity: 1; } .toggle.ng-leave-active { opacity: 0; }
var app = angular.module("app", ["ngAnimate"]); app.controller("AppCtrl", function() { this.toggle = true; }); app.animation(".toggle",function(){ return{ leave:function(el,done){ el.text("Nooo!"); TweenMax.to(el, 1, {opacity: 0}); }, enter:function(el, done){ el.text("Yeeee!"); TweenMax.from(el,1,{opacity:0}) } } });
相关文章
- WebView和JavaScript如何实现相互调用
- javascript中的this
- [Javascript] Swap array item in place using splice()
- [Javascript] Run asynchronous functions in sequence using reduce
- [Javascript] Automate the process of flattening deeply nested arrays using ES2019's flat method
- [Javascript] Conditionally spread entries to a JavaScript object
- [Algorithms] Divide and Recurse Over an Array with Merge Sort in JavaScript
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Javascript] Compose multiple functions for new behavior in JavaScript
- [Javascript] Identify the most important words in a document using tf-idf in Natural
- [Javascript] Hoisting in JavaScript
- [AngularJS + Webpack] Using Webpack for angularjs
- 了解Javascript 变量
- 【JavaScript】jQuery
- [Javascript] Wrap a Javascript Built-in constructor with Proxy
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Javascript] Hide Properties from Showing Up in "for ... in" Loops in JavaScript
- [Algorithm] Median Maintenance algorithm implementation using TypeScript / JavaScript
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript + rxjs] Using the map method with Observable
- [Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript
- 一文搞懂JavaScript中的typeof用法
- Atitit.js模块化 atiImport 的新特性javascript import
- JavaScript 输出函数的占位符有哪些?
- jQWidgets JavaScript 16.0 Crack
- 【华为OD机试 2023】最优高铁城市修建方案(C++ Java JavaScript Python)
- Javascript 正则验证带 + 号的邮箱地址