Angular如何製作animations動畫三?這裡有angularjs製作animations動畫的詳情
這篇文章為練習的文章,鞏固自己的學的成果,現在我們試試看做angularjs中的animations動畫三,看看效果。下面就讓我們一起來看下去吧
這是前言
文章基於angular的練手項目。文章目錄
上一篇文章《Angular練習之animations動畫二》中練習了入場與出場動畫、 Keyframes實作串連動畫、Group實作並行動畫。今天練習動畫回調函數、query選擇器。
開始練習
回呼函數
(想看更多就到PHP中文網AngularJS開發手冊中學習)
回呼叫法也是很簡單,如下:
<p> </p> Callback(f:boolean){ if(f){ console.log("动画开始"); }else { console.log("动画结束"); } }
#query
用法和css選擇器大致相同,透過query便可以實現不同元素實現不同的動畫效果。
/* query选择器演示 用法和css选择器大致相同 */ export const QueryAnimate = trigger('QueryAnimate',[ transition('off=>on', [ // 先全部隐藏 query('p', style({ opacity: 0 })), // 再执行动画 query('.box-top', animate('500ms',keyframes([ style({opacity: 0, transform: 'translateY(-400%)', offset: 0}), style({opacity: 1, transform: 'translateY(0)', offset: 1.0}) ]) )), query('.box-center', animate('500ms',keyframes([ style({opacity: 0, transform: 'translateX(-400%)', offset: 0}), style({opacity: 1, transform: 'translateX(0)', offset: 1.0}) ]) )), query('.box-foot', animate('500ms',keyframes([ style({opacity: 0, transform: 'translateY(400%)', offset: 0}), style({opacity: 1, transform: 'translateY(0)', offset: 1.0}) ]) )), query('h2', animate('500ms',keyframes([ style({transform:'scale(0.5)'}), style({transform: 'scale(1)'}) ]) )), ]), transition('on=>off', [ query('.box-top', animate('500ms',keyframes([ style({opacity: 1, transform: 'translateY(0)'}), style({opacity: 0, transform: 'translateY(-400%)'}) ]) )), query('.box-center', animate('500ms',keyframes([ style({opacity: 1, transform: 'translateX(0)'}), style({opacity: 0, transform: 'translateX(-400%)'}) ]) )), query('.box-foot', animate('500ms',keyframes([ style({opacity: 1, transform: 'translateY(0)'}), style({opacity: 0, transform: 'translateY(400%)'}) ]) )), query('h2', animate('500ms',keyframes([ style({transform:'scale(1)'}), style({transform: 'scale(0.5)'}) ]) )), ]) ]);
源
#原始碼放在github開源社群上面,隨時會更新。所以你下載最新版本的時候會與該文章描述的略有差異。 github網址:https://github.com/yiershan/A...
好了,這篇文章到這就結束了(想看更多就到PHP中文網AngularJS使用手冊中學習),有問題的可以在下方留言提問。
#以上是Angular如何製作animations動畫三?這裡有angularjs製作animations動畫的詳情的詳細內容。更多資訊請關注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屬性的值需要指定動畫名稱、動畫執行時間、動畫延遲時

這篇文章帶大家繼續angular的學習,簡單了解一下Angular中的獨立組件(Standalone Component),希望對大家有幫助!

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

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

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

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