在本教程中,我們將看到Anijs的全部內容以及如何使用它來創(chuàng)建一些很酷的動畫效果。
>庫在html5數據屬性中使用一個自定義屬性,稱為data-anijs來創(chuàng)建動畫的聲明語句。例如,代碼`
`表示如果輸入字段焦點,它將對錨標記元素進行“ Wobble”動畫。- >庫還提供了使用“之前”關鍵字在動畫之前和之后調用功能的功能。這可以用于控制動畫的流程,例如在運行動畫之前驗證表單條目,或者在運行動畫之前顯示和隱藏不同的屏幕。
- 在上面的代碼中,聲明語法說: 如果專注于焦點,請對錨標記元素進行搖擺。
- >
在本教程的過程中,我們將使用Anijs創(chuàng)建一個動畫來創(chuàng)建一個應用程序。該應用將是一個簡單的用戶注冊和登錄應用程序,它將使用ANIJS包括一些動畫。本教程的主要重點是我們如何使用Anijs在Web應用中工作。
。開始,下載anijs并將其包含在您的頁面中,或引用CDN版本。
<span><span><span><input</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span>用于樣式,我們將使用andate.css libray by dan Eden。
創(chuàng)建登錄屏幕
首先,我們將創(chuàng)建一個屏幕供用戶登錄。這是html:到目前為止,我們擁有的只是一個靜態(tài)登錄頁面。有了一些CSS,看起來像這樣:
>請參閱codepen上的sitepoint(@sitepoint)的pen anijs教程,
上的靜態(tài)登錄屏幕(@sitepoint)我們已經創(chuàng)建了屏幕,現(xiàn)在我們需要驗證登錄過程。為了附加動畫效果,我們使用特定元素上的數據anijs屬性。我們使用稱為data-anijs的自定義屬性使用HTML5數據屬性編寫聲明語句。讓我們將此屬性添加到簽名按鈕中,如下所示:
><span><span><span><input</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span>在上面的代碼中,聲明句子說:
單擊“登錄”按鈕時,使用類別.login_screen對元素進行鉸鏈動畫。因此,當我們單擊按鈕時,鉸鏈動畫會生效,正如您通過單擊下面的演示中的簽名按鈕所看到的:
請參閱pen anijs演示,在codepen上通過sitepoint(@sitepoint)登錄失敗。在上述演示中,當按鈕被單擊時,無論有效還是無效的登錄,動畫都可以使用。這并不是我們想要的,所以讓我們修改現(xiàn)有代碼以僅在無效的登錄中進行動畫。
為了檢查登錄是否有效,我們需要在動畫之前調用validation函數。為此,我們將使用之前的關鍵字。在ANIJS文檔中可以找到與調用動畫之前和之后的函數有關的詳細文檔。我們將通過事件對象傳遞到觸發(fā)動畫以及動畫context。
>我們還將修改signin按鈕的數據屬性以包括之前的動畫函數,如下所示: >現(xiàn)在,只有在電子郵件或密碼字段為空的情況下,動畫才會發(fā)生。使用AnimationContext.run()命令在上方的JavaScript代碼塊中運行動畫。如果輸入了電子郵件和密碼,則將顯示“處理……”消息。 >
>: >上面的代碼單擊注冊鏈接時,在具有reg_screen類別的元素上進行滾動動畫(這是我們的寄存器屏幕)。但這是行不通的,因為寄存器屏幕被隱藏了。
這是一個帶有我們新添加的代碼的演示: >現(xiàn)在可以使寄存器屏幕可見,我們還需要將寄存器屏幕中的登錄鏈接連接到原始登錄屏幕,類似于我們剛剛為寄存器屏幕所做的操作。這是函數:
>
通常,我們通常會在變量中緩存許多這些對象,而不是重復對它們的引用。我們只是為這個簡單的示例而這樣做。>
>
這是我們的最終演示:
什么是Anijs,它如何工作? > >使用anijs創(chuàng)建動畫涉及添加data-anijs屬性HTML元素并定義動畫參數。 Data-Anijs屬性使用的簡單語法指定事件,動畫元素,應用動畫和回調函數。您還可以使用ANIJS助手函數來控制動畫流。 anijs anijs支持廣泛的CSS動畫。您可以創(chuàng)建簡單的動畫,例如淡出和幻燈片,以及涉及轉換和過渡的更復雜的動畫。 ANIJS還支持動畫鏈,使您可以創(chuàng)建以特定順序執(zhí)行的動畫序列。 > ><span><span><span><script</span> src<span>="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</span>></span><span><span></script</span>></span></span>
<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span> <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span>
這是我們到目前為止所擁有的演示:<span><span><span><input</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span>
<span><span><span><script</span> src<span>="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</span>></span><span><span></script</span>></span></span>
<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span> <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span>
>請參閱codepen上的sitepoint(@sitepoint)的筆zdjlc。
<span><span><span><div</span> class<span>="container"</span>></span>
</span>
<span><span><span><div</span> id<span>="divLogin"</span> class<span>="login_screen"</span>></span>
</span> <span><span><span><h2</span> id<span>="spnLogin"</span>></span>Sign In<span><span></h2</span>></span>
</span> <span><span><span><input</span> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span> <span><span><span><input</span> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span> <span><span><span><a</span> href<span>="#"</span> class<span>="btn"</span>></span>
</span> SignIn
<span><span><span></a</span>></span>
</span> <span><span><span><a</span> href<span>="#"</span> class<span>="signup-link"</span>></span>Register?<span><span></a</span>></span>
</span> <span><span><span></div</span>></span><!-- .login-screen -->
</span>
<span><span><span></div</span>></span><!-- .container --></span>
>
<span><span><span><a</span> href<span>="#"</span>
</span></span><span> <span>class<span>="btn"</span>
</span></span><span> <span>data-anijs<span>="if: click, do: hinge animated, to: .login_screen"</span>></span>
</span> SignIn
<span><span><span></a</span>></span></span>
>請參閱pen anijs演示,在codepen上按SitePoint(@sitepoint)顯示登錄和顯示登記冊。<span>var animationHelper = AniJS.getHelper(),
</span> spnLogin <span>= document.getElementById('spnLogin');
</span>
animationHelper<span>.validateLogin = function (e<span>, animationContext</span>) {
</span> <span>var email = document.getElementById('txtLoginId').value;
</span> <span>var pass = document.getElementById('txtLoginPass').value;
</span> <span>if (email && pass) {
</span> spnLogin<span>.innerHTML = 'Processing...';
</span> <span>} else {
</span> spnLogin<span>.innerHTML = 'Fill Required fields.';
</span> animationContext<span>.run();
</span> <span>}
</span><span>}</span>
請參閱codepen上的sitepoint(@sitepoint)的pen anijs演示。<span><span><span><a</span> href<span>="#"</span>
</span></span><span> <span>class<span>="btn"</span>
</span></span><span> <span>data-anijs<span>="if: click, do: hinge animated, to: .login_screen, before: validateLogin"</span>></span>
</span> SignIn
<span><span><span></a</span>></span></span>
經常詢問的問題(常見問題解答)
>如何安裝anijs?
安裝Anijs很簡單。您可以直接從GitHub存儲庫下載它,也可以使用NPM或Bower等軟件包管理器。下載后,您只需要在HTML文件中包含ANIJS腳本即可。然后,您可以通過將data-anijs屬性添加到您的html元素來開始使用anijs。>我可以使用Anijs創(chuàng)建哪些類型的動畫?
我可以使用anijs進行響應式設計嗎?
是的,可以將anijs用于響應式設計。使用ANIJS創(chuàng)建的動畫基于CSS,這意味著它們可以縮放并適應不同的屏幕尺寸和分辨率。這使ANIJS成為創(chuàng)建在臺式機和移動設備上都可以正常工作的動畫的有用工具。如何控制Anijs中動畫的時間?我可以為Anijs的發(fā)展做出貢獻嗎?您可以通過報告錯誤,建議新功能,改進文檔或提交代碼改進的拉請請求來做出貢獻。您可以找到有關如何在Anijs GitHub頁面上做出貢獻的更多信息。
>
以上是ANIJS:CSS動畫的聲明性處理庫的詳細內容。更多信息請關注PHP中文網其他相關文章!

熱AI工具

Undress AI Tool
免費脫衣服圖片

Undresser.AI Undress
人工智能驅動的應用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機

Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

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

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

禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6
視覺化網頁開發(fā)工具

SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)

在JavaScript中,選擇單行注釋(//)還是多行注釋(//)取決于注釋的目的和項目需求:1.使用單行注釋進行快速、內聯(lián)的解釋;2.使用多行注釋進行詳細的文檔說明;3.保持注釋風格的一致性;4.避免過度注釋;5.確保注釋與代碼同步更新。選擇合適的注釋風格有助于提高代碼的可讀性和可維護性。

是的,javascriptcommentsarenectary和shouldshouldshouldseffectional.1)他們通過codeLogicAndIntentsgudedepleders,2)asevitalincomplexprojects,和3)handhanceClaritywithOutClutteringClutteringThecode。

Java和JavaScript是不同的編程語言,各自適用于不同的應用場景。Java用于大型企業(yè)和移動應用開發(fā),而JavaScript主要用于網頁開發(fā)。

JavascriptconcommentsenceenceEncorenceEnterential gransimenting,reading and guidingCodeeXecution.1)單inecommentsareusedforquickexplanations.2)多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3)

評論arecrucialinjavascriptformaintainingclarityclarityandfosteringCollaboration.1)heelpindebugging,登機,andOnderStandingCodeeVolution.2)使用林格forquickexexplanations andmentmentsmmentsmmentsmments andmmentsfordeffordEffordEffordEffordEffordEffordEffordEffordEddeScriptions.3)bestcractices.3)bestcracticesincracticesinclud

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

JavaScriptIspreferredforredforwebdevelverment,而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1)JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2)

JavaScript中的日期和時間處理需注意以下幾點:1.創(chuàng)建Date對象有多種方式,推薦使用ISO格式字符串以保證兼容性;2.獲取和設置時間信息可用get和set方法,注意月份從0開始;3.手動格式化日期需拼接字符串,也可使用第三方庫;4.處理時區(qū)問題建議使用支持時區(qū)的庫,如Luxon。掌握這些要點能有效避免常見錯誤。
