ngAnimate插件是做什麼的?
ngAnimate外掛是做什麼的?
ngAnimate插件如其名字一樣是為元素提供動畫的。
怎麼定義動畫?
第一步必須是引入外掛程式
<script src="//cdn.bootcss.com/angular.js/1.3.20/angular.js?1.1.11"></script><script src="//cdn.bootcss.com/angular.js/1.3.20/angular-animate.min.js?1.1.11"></script>
#
第二步驟讓app引入(依賴)這個外掛
<br>
var appH5=angular.module("app",['ngAnimate']); appH5.controller("myTabCtrl",['$scope',function($scope){ $scope.isShow=true; }])<body ng-controller="myTabCtrl"><input type="checkbox" ng-model="isShow" /><div class="new-item" ng-if="isShow">我是要动画的元素</div></body>添加动画的第一种方式:通过css3.0的方式 样式定义示例 .new-item{ padding: 10px; border-bottom: 1px solid #ededed; font-size: 1.5rem; position: relative; transition:all 0.5s; } /*元素进入页面初始状态*/ .new-item.ng-enter{ top: 10px; } /*进入页面动画后的最终状态*/ .new-item.ng-enter-active{ top: 0px; } /*元素移出页面初始状态*/ .new-item.ng-leave{ opacity:1; } /*移出页面动画后的最终状态*/ .new-item.ng-leave-active{ opacity:0; } //html<div class="new-item">我是要动画的元素</div>
<br>
<br>
為什麼要新增樣式就可以產生動畫? <br>當元素進入頁面時,angular會為元素依序加上上class ng-enter 和 ng-enter-active,相信大家都知道,CSS3.0在一個元素定義了transition 之後,兩個相同屬性的屬性值改變就會用過渡動畫來實現屬性值的改變。當元素移除頁面時也是同理,所以我們只要定義元素的四個class來定義這四個時間點的狀態,其他的就交給angular來做就好了。
支援這種方式定義動畫的指令有哪些? <br>ng-if、ng-view、ng-repeat、ng-include、ng-switch<br>這幾個指令是透過新節點和移除節點來實現元素的顯示和隱藏的
-
ng-repeat 的不同之處
.new-item{ padding: 10px; border-bottom: 1px solid #ededed; font-size: 1.5rem; position: relative; transition:all 0.5s; } .new-item.ng-enter{ top: 10px; } .new-item.ng-enter-active{ top: 0px; } .new-item.ng-enter-stagger{/*ng-repeat提供了这个样式,来实现每一个item条目的依次执行某个动画 */ animation-delay:100ms; -webkit-animation-delay:100ms; } .new-item.ng-leave{ opacity:1; } .new-item.ng-leave-active{ opacity:1; } .new-item.ng-leave-stagger{ animation-delay:100ms; -webkit-animation-delay:100ms; } //html<div class="new-item" ng-repeat="new in news">{{new.title}}</div>
登入後複製
剛才說透過新建和刪除元素來實現的指令是可以進行動畫的,那麼只是更改樣式顯示或隱藏元素的指令(ng-show ng-hide ng-class )能不能進行動畫呢?
/*元素隐藏初始状态*/ .new-item.ng-hide-add{ opacity:1; } /*隐藏操作动画后的最终状态*/ .new-item.ng-hide-add-active{ opacity:0; } /*元素显示初始状态*/ .new-item.ng-hide-remove{ top: 10px; } /*显示操作动画后的最终状态*/ .new-item.ng-hide-remove-active{ top: 0px; }
<br/>
新增動畫的第二種方式:透過js的方式
//ng-if、ng-view、ng-repeat、ng-include、ng-switch 指令 appH5.animation(".new-item",function(){ return { leave:function(element,done){ //第一个参数是运动的元素,第二个参数是动画完成后的回调,必须调用的,不调用则指令功能不会执行 $(element).animate({width:0,height:0},1000,done);//借助jQuery }, enter:function(element,done){ $(element).css({width:100,height:100});//借助jQuery $(element).animate({width:100,height:100},1000,done)//借助jQuery } } }); //ng-show ng-hide ng-class 指令 appH5.animation(".new-item",function(){ return { addClass:function(element,sClass,done){ //第一个参数是运动的元素 //第二个参数是元素的样式-->一般用不上 //第三个参数是动画完成后的回调,必须调用的,不调用则指令功能不会执行 $(element).animate({width:0,height:0},1000,done) }, removeClass:function(element,sClass,done){ $(element).css({width:100,height:100}); $(element).animate({width:100,height:100},1000,done) } } });
以上是ngAnimate插件是做什麼的?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

當微軟推出Windows11時,它帶來了許多變化。其中一項變更是增加了使用者介面動畫的數量。有些使用者想要改變事物的出現方式,他們必須想辦法去做。擁有動畫讓使用者感覺更好、更友善。動畫使用視覺效果使電腦看起來更具吸引力和響應能力。其中一些包括幾秒鐘或幾分鐘後的滑動菜單。電腦上有許多動畫會影響PC效能、減慢速度並影響您的工作。在這種情況下,您必須關閉動畫。本文將介紹使用者可以提高在PC上的動畫速度的幾種方法。您可以使用登錄編輯程式或您執行的自訂檔案來套用變更。如何提高Windows11動畫的
![動畫不工作在PowerPoint中[修復]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
您是否正在嘗試製作演示文稿,但無法添加動畫?如果動畫在你的WindowsPC上的PowerPoint中不起作用,那麼這篇文章將會幫助你。這是一個常見的問題,許多人都在抱怨。例如,在Microsoft團隊中演示或在螢幕錄製期間,動畫可能會停止運作。在本指南中,我們將探索各種故障排除技術,以協助您修復在Windows上的PowerPoint中無法運作的動畫。為什麼我的PowerPoint動畫不起作用?我們注意到Windows上PowerPoint中的動畫可能無法運作問題的一些可能原因如下:由於個

CSS動畫:如何實現元素的閃光效果,需要具體程式碼範例在網頁設計中,動畫效果有時可以為頁面帶來很好的使用者體驗。而閃光效果是一種常見的動畫效果,它可以使元素更加引人注目。以下將介紹如何使用CSS實現元素的閃光效果。一、閃光的基本實作首先,我們需要使用CSS的animation屬性來實現閃光效果。 animation屬性的值需要指定動畫名稱、動畫執行時間、動畫延遲時

本站1月26日消息,國產3D動畫電影《二郎神之深海蛟龍》發布一組最新劇照,正式宣布將於7月13日上映。據了解,《二郎神之深海蛟龍》是由迷狐星(北京)動漫有限公司、霍爾果斯眾合千澄影業有限公司、浙江橫店影業有限公司、浙江共贏影業有限公司、成都天火科技有限公司、華文映像(北京)影業有限公司出品,王君執導的動畫電影,原定2022年7月22日在中國大陸上映。本站劇情簡介:封神之戰後,姜子牙攜「封神榜」分封諸神,而後封神榜被天庭封印於九州祕境深海之下。事實上,除了分封神位,封神榜中還封緘著眾多強大的妖邪元

如何使用Vue實現打字機動畫特效打字機動畫是一種常見且引人注目的特效,常用於網站的標題、標語等文字展示上。在Vue中,我們可以透過使用Vue自訂指令來實現打字機動畫效果。本文將詳細介紹如何使用Vue來實現此特效,並提供具體的程式碼範例。步驟1:建立Vue專案首先,我們需要建立一個Vue專案。可以使用VueCLI來快速建立一個新的Vue項目,或手動在HT

我們在日常的辦公中常常會使用到ppt,那麼你是否對ppt裡邊的每個操作功能都很了解呢?例如:ppt中怎麼設定動畫效果、怎麼設定切換效果、每個動畫的效果長度是多少?每個投影片能不能自動播放、ppt動畫先進入再退出等等,那麼今天這期我就先跟大家分享ppt動畫先進入再退出的具體操作步驟,就在下方,小伙伴們快來看一看吧! 1.首先,我們在電腦中開啟ppt,點選文字方塊外側選取文字框,(如下圖紅色圈出部分所示)。 2.然後,點選選單列中的【動畫】,選取【擦除】的效果,(如圖紅色圈出部分所示)。 3.接下來,點擊【

本站需要重新寫作的內容是:9需要重新寫作的內容是:月需要重新寫作的內容是:23需要重新寫作的內容是:日消息,動畫影集《明日方舟》的第二季主線劇《明日方舟:冬隱歸路》公佈定檔需要重新寫作的內容是:PV,將於需要重新寫作的內容是:10需要重新寫作的內容是:月需要重新寫作的內容是:7需要重新寫作的內容是:日需要重新寫作的內容是:00:23需要重新寫作的內容是:正式上線,點此進入主題官網。需要重新寫作的內容是:本站注意到,《明日方舟:冬隱歸路》是《明日方舟:黎明前奏》的續作,劇情簡介如下:為阻止感染者群組

Netflix的黏土動畫電影《小雞快跑2》的最終預告片已經公佈,該影片預計將於12月15日上線本站注意到,《小雞快跑2》預告片展示了小雞洛基和金傑為了尋找女兒莫莉開展行動。莫莉被FunLand農場的一輛卡車帶走,洛基和金傑冒著危險找回女兒。該片由山姆・菲爾執導,並由桑迪韋・牛頓、扎克瑞・萊維、貝拉・拉姆齊、伊梅爾達・斯湯頓和大衛・布拉德利主演。據了解,《小雞快跑2》是繼《小雞快跑》之後時隔20多年推出的續集。第一部作品於2001年1月2日在中國上映,講述了一群小雞們在養雞廠面臨被做成雞肉餡餅的命運
