搜索
首页web前端js教程ANIJS:CSS动画的声明性处理库

AniJS: A Declarative Handling Library for CSS Animations

ANIJS:CSS动画的声明性处理库

在学习编程的学生中,动画一直是学生的最爱。在我参加的最近的周末网络开发研讨会上,讨论了使用CSS的动画。那是当我偶然发现Anijs的时候,Anijs是CSS动画的声明性处理库。

在本教程中,我们将看到Anijs的全部内容以及如何使用它来创建一些很酷的动画效果。>

钥匙要点

anijs是CSS动画的声明性处理库,允许使用直接写在HTML中的简单声明的命令创建动画,简化了动画的管理。

>库在html5数据属性中使用一个自定义属性,称为data-anijs来创建动画的声明语句。例如,代码`

`表示如果输入字段焦点,它将对锚标记元素进行“ Wobble”动画。> Anijs可用于使用动画增强Web应用程序。本教程使用了简单的用户注册和登录应用程序的示例,演示了如何创建登录屏幕,验证登录过程以及使用Anijs使用动画创建寄存器屏幕。
    >库还提供了使用“之前”关键字在动画之前和之后调用功能的功能。这可以用于控制动画的流程,例如在运行动画之前验证表单条目,或者在运行动画之前显示和隐藏不同的屏幕。
  • Anijs 简介 使用anijs,我们可以使用html中的声明命令编写动画。它提供了一种使用表达逻辑的声明来管理动画的简便方法。以下是Anijs声明语法的一个示例:
  • 在上面的代码中,声明语法说:
  • 如果专注于焦点,请对锚标记元素进行摇摆。
  • >
入门

在本教程的过程中,我们将使用Anijs创建一个动画来创建一个应用程序。该应用将是一个简单的用户注册和登录应用程序,它将使用ANIJS包括一些动画。本教程的主要重点是我们如何使用Anijs在Web应用中工作。

开始,下载anijs并将其包含在您的页面中,或引用CDN版本。

<span><span><span><input> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>
用于样式,我们将使用andate.css libray by dan Eden。

创建登录屏幕

首先,我们将创建一个屏幕供用户登录。这是html:

到目前为止,我们拥有的只是一个静态登录页面。有了一些CSS,看起来像这样:

>请参阅codepen上的sitepoint(@sitepoint)的pen anijs教程,

上的静态登录屏幕(@sitepoint)

我们已经创建了屏幕,现在我们需要验证登录过程。为了附加动画效果,我们使用特定元素上的数据anijs属性。我们使用称为data-anijs的自定义属性使用HTML5数据属性编写声明语句。让我们将此属性添加到签名按钮中,如下所示:

>
<span><span><span><input> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>
在上面的代码中,声明句子说:

单击“登录”按钮时,使用类别.login_screen对元素进行铰链动画。因此,当我们单击按钮时,铰链动画会生效,正如您通过单击下面的演示中的签名按钮所看到的:

请参阅pen anijs演示,在codepen上通过sitepoint(@sitepoint)登录失败。

在上述演示中,当按钮被单击时,无论有效还是无效的登录,动画都可以使用。这并不是我们想要的,所以让我们修改现有代码以仅在无效的登录中进行动画。

为了检查登录是否有效,我们需要在动画之前调用validation函数。为此,我们将使用之前的关键字。在ANIJS文档中可以找到与调用动画之前和之后的函数有关的详细文档。我们将通过事件对象传递到触发动画以及动画context。首先,我们将定义Anijs助手,然后声明动画函数。这是函数的外观:

>我们还将修改signin按钮的数据属性以包括之前的动画函数,如下所示:

<span><span><span><script> src<span >="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</script></span>></span><span><span></span>></span></span>

>现在,只有在电子邮件或密码字段为空的情况下,动画才会发生。使用AnimationContext.run()命令在上方的JavaScript代码块中运行动画。如果输入了电子邮件和密码,则将显示“处理……”消息。

>
<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span></span>
这是我们到目前为止所拥有的演示:

>

>请参阅pen anijs演示,通过codepen上的sitepoint(@sitepoint)验证签名按钮。

创建寄存器屏幕

接下来,我们将为我们的应用创建一个寄存器(或注册)页面。如您所见,我们在登录页面上已经有一个寄存器链接。我们要做的就是将一些动画和事件附加到寄存器链接。首先,将寄存器页面的以下HTML添加到我们现有的HTML: 注意带有显示的内联CSS:.REG_SCREEN元素上的无,这使该屏幕默认隐藏了。要将登录屏幕中的寄存器链接连接到此新屏幕,我们将data-anijs属性添加到链接:

>:

<span><span><span><input> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>

>上面的代码单击注册链接时,在具有reg_screen类别的元素上进行滚动动画(这是我们的寄存器屏幕)。但这是行不通的,因为寄存器屏幕被隐藏了。

我们需要做的是在动画发生之前调用功能。在该功能中,我们在可见寄存器屏幕时隐藏登录屏幕。然后我们运行动画。这是javaScript:

然后,我们将修改寄存器链接的data-anijs属性:>
<span><span><span><script> src<span >="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</script></span>></span><span><span></span>></span></span>

这是一个带有我们新添加的代码的演示:

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span></span>
>请参阅codepen上的sitepoint(@sitepoint)的笔zdjlc。

>现在可以使寄存器屏幕可见,我们还需要将寄存器屏幕中的登录链接连接到原始登录屏幕,类似于我们刚刚为寄存器屏幕所做的操作。这是函数:

>这是登录链接的修改数据-Anijs属性:>

>这是一个带有新代码的演示:
<span><span><span><div> class<span>="container"</span>>

    <span><span><span><div> id<span>="divLogin"</span> class<span>="login_screen"</span>>
      <span><span><span><h2 id="id-span-spnLogin-span-gt"> id<span>="spnLogin"</span>></h2></span>Sign In<span><span></span>></span>
</span>      <span><span><span><input> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="btn"</span>></a></span>
</span>        SignIn
      <span><span><span></span>></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="signup-link"</span>></a></span>Register?<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span><!-- .login-screen -->
</span>
<span><span><span></span></span></span>
</div></span>></span><!-- .container --></span>
>

>

>编辑器注:下面的演示似乎无法在这些嵌入中正确起作用100%,尤其是当您尝试在“登录”和“寄存器”之间多次切换时。尝试Codepen框架中的“编辑”链接以查看完整的演示,在此工作正常。
<span><span><span><a> href<span>="#"</span> 
</a></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></span>></span></span></span>
>请参阅pen anijs演示,在codepen上按SitePoint(@sitepoint)显示登录和显示登记册。

与我们在登录屏幕中所做的类似,我们将使用一个函数验证寄存器表单:

通常,我们通常会在变量中缓存许多这些对象,而不是重复对它们的引用。我们只是为这个简单的示例而这样做。>

>最后,让我们修改html中的data-anijs属性以包括动画和函数调用。

>

这是我们的最终演示:

<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演示。

结论

在本教程中,我们讨论的只是一个偷偷摸摸地进入这个很棒的图书馆。有关其使用情况的深入信息可在Anijs文档中获得。
<span><span><span><a> href<span>="#"</span>
</a></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></span>></span></span></span>
经常询问的问题(常见问题解答)

什么是Anijs,它如何工作? anijs是CSS动画的声明性处理库。它允许开发人员使用简单而直观的语法创建动画,而无需编写复杂的JavaScript代码。 ANIJS通过在您的HTML元素中解析数据anijs属性并执行相应的动画来工作。这使得管理和控制动画变得更容易,因为您可以直接在html中定义它们。

>

>如何安装anijs?

安装Anijs很简单。您可以直接从GitHub存储库下载它,也可以使用NPM或Bower等软件包管理器。下载后,您只需要在HTML文件中包含ANIJS脚本即可。然后,您可以通过将data-anijs属性添加到您的html元素来开始使用anijs。

>

>我可以与其他JavaScript库一起使用anijs?库。它不会干扰其他库的功能,您可以与诸如jQuery,react或Angular之类的库一起使用。这使Anijs成为在各种Web开发环境中创建动画的多功能工具。

如何使用anijs创建动画?

>使用anijs创建动画涉及添加data-anijs属性HTML元素并定义动画参数。 Data-Anijs属性使用的简单语法指定事件,动画元素,应用动画和回调函数。您还可以使用ANIJS助手函数来控制动画流。

>我可以使用Anijs创建哪些类型的动画?

anijs anijs支持广泛的CSS动画。您可以创建简单的动画,例如淡出和幻灯片,以及涉及转换和过渡的更复杂的动画。 ANIJS还支持动画链,使您可以创建以特定顺序执行的动画序列。

我可以使用anijs进行响应式设计吗?

是的,可以将anijs用于响应式设计。使用ANIJS创建的动画基于CSS,这意味着它们可以缩放并适应不同的屏幕尺寸和分辨率。这使ANIJS成为创建在台式机和移动设备上都可以正常工作的动画的有用工具。

如何控制Anijs中动画的时间?

anijs anijs提供了几种控制时间的方法动画。您可以在data-anijs属性中指定动画的持续时间,并且可以使用延迟功能在一定时间内暂停动画。您还可以使用ANIJS助手函数来控制动画流和时机。

我可以使用anijs动画svg元素吗?

是的,可以使用anijs来动画SVG元素。您可以像常规的HTML元素一样,将相同的动画参数和控制方法应用于SVG元素。这使您可以创建涉及SVG图形和形状的复杂动画。

>

>如何调试Anijs中的动画?在anijs中调试动画涉及检查数据anijs属性和CSS的语法动画属性。如果动画无法正常工作,则可以使用浏览器的开发人员工具来检查HTML元素并检查应用的CSS属性。您还可以检查JavaScript控制台是否与Anijs相关的任何错误消息。

>

我可以为Anijs的发展做出贡献吗?您可以通过报告错误,建议新功能,改进文档或提交代码改进的拉请请求来做出贡献。您可以找到有关如何在Anijs GitHub页面上做出贡献的更多信息。

>

以上是ANIJS:CSS动画的声明性处理库的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在JavaScript中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

8令人惊叹的jQuery页面布局插件8令人惊叹的jQuery页面布局插件Mar 06, 2025 am 12:48 AM

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

构建您自己的Ajax Web应用程序构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

10张移动秘籍用于移动开发10张移动秘籍用于移动开发Mar 05, 2025 am 12:43 AM

该帖子编写了有用的作弊表,参考指南,快速食谱以及用于Android,BlackBerry和iPhone应用程序开发的代码片段。 没有开发人员应该没有他们! 触摸手势参考指南(PDF) Desig的宝贵资源

通过来源查看器提高您的jQuery知识通过来源查看器提高您的jQuery知识Mar 05, 2025 am 12:54 AM

jQuery是一个很棒的JavaScript框架。但是,与任何图书馆一样,有时有必要在引擎盖下发现发生了什么。也许是因为您正在追踪一个错误,或者只是对jQuery如何实现特定UI感到好奇

如何创建和发布自己的JavaScript库?如何创建和发布自己的JavaScript库?Mar 18, 2025 pm 03:12 PM

文章讨论了创建,发布和维护JavaScript库,专注于计划,开发,测试,文档和促销策略。

10个JQuery Fun and Games插件10个JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味横生的jQuery游戏插件,让您的网站更具吸引力,提升用户粘性!虽然Flash仍然是开发休闲网页游戏的最佳软件,但jQuery也能创造出令人惊喜的效果,虽然无法与纯动作Flash游戏媲美,但在某些情况下,您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏 游戏编程的“Hello world”,现在有了jQuery版本。 源码 jQuery疯狂填词游戏 这是一个填空游戏,由于不知道单词的上下文,可能会产生一些古怪的结果。 源码 jQuery扫雷游戏

jQuery视差教程 - 动画标题背景jQuery视差教程 - 动画标题背景Mar 08, 2025 am 12:39 AM

本教程演示了如何使用jQuery创建迷人的视差背景效果。 我们将构建一个带有分层图像的标题横幅,从而创造出令人惊叹的视觉深度。 更新的插件可与JQuery 1.6.4及更高版本一起使用。 下载

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。