动画-使用第三方 animate.css 类库实现动画|学习笔记

简介: 快速学习动画-使用第三方 animate.css 类库实现动画

开发者学堂课程【Vue.js 入门与实战动画-使用第三方 animate.css 类库实现动画】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8166


动画-使用第三方 animate.css 类库实现动画


一、animate.css 类库实现动画

新建05动画-使用第三方类实现动画

image.png

可以看到,此时是没有任何动画效果的。

了解 animate.css,提供了好多常见的动画效果,在03和04中,学会了如何进场和立场,但是有一些特效不好实现。于是我们可以借助第三方 animate.css 来帮助我们实现,特殊的出场和离场动画,提供的样式更加丰富些。

image.png

在框内选择各种效果,可以看到字体显示了该种类对应的动画。

先设置出场和离场动画:

<!-- 入场 bounceIn     离场 bounceout-->

在使用了第三方animate.css后,我们就不需要写V-等。

<transition enter -active-class=“bounceIn”leave-active-class“bounceOut”>

其中,enter -active-class,表示进入时间段,这个时间段用 bounceIn 这个动画;

leave-active-class,表示出场时间段,这个时间段用 bounceOut 这个动画;

点击,我们会发现,并没有任何效果。原因在于入场和出场之前,我们需要新加一个类,叫“animated”,代码如下:

<transition enter -active-class=“bounceIn”leave-active-class“bounceOut”:duration=“200”>

<h3 V-if=“flag”class=“animated”>只是一个H3</h3>

</transition>

<!--使用:duration“毫秒值”来统一设置入场和离场时候的动画时长-->

</div>

这是发现,动画可以正常使用了。“animated”可以写一次,也可以写两次。经过实践发现,写一次也可正常启动动画。

<acript>

//创建Vue 实例,得到 Viewmodel

el:’lapp’,

data:(

flag:false

},

Methods:{}

}};

<transition

enter-active-class=“bounceIn”

leave-active-class=“bounceOut”

;duration=”(enter:200,leave:400}”>

<h3 V-if=“flag”class=“animated”>只是一个H3</h3>

</transition>

</div>

Duration,是为动画指定特定时间,使用其可以统一设置“入场”和“离场”的动画时长。使用 Durationduration=”(enter:200,leave:400},来分别设置入场的时长和离场的时长。此时刷新,发现动画的出现明显的慢了一些。

目录
打赏
0
0
0
0
55
分享
相关文章
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
195 73
|
6月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
115 34
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
245 63
|
6月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
97 22
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
372 58
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
212 58
|
8月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
141 31
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
146 6

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问