AI智能应用开发（Java）
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
跨境电商
电商视觉设计
软件测试
新媒体+短视频
集成电路应用开发
C/C++
狂野架构师
IP短视频
Web前端培训：自定义类名结合animate.css实现动画
更新时间:2022年09月27日15时43分 来源:大阳城app官网入口 浏览次数:
animate.css是一个跨浏览器的CSS3动画库，它内置了很多经典的CSS3动画。使用起来很方便。下面我们通过例4-2讲解如何使用自定义类名和animate.css库实现动画效果。
【例4-2】
(1)从animate.css官方网站获取animate.css文件，保存到chapter04目录中。
(2)创建C:\vue\chapter04\demo02.html文件，引入animate.css，如下所示：
(3)在demo02.html文件中编写HTML结构，具体代码如下：
过渡文字效果
上述代码中，第3、4行给标签设置了enter-active-class与leave-active-class两个属性，用来自定义类名，属性值为animate.css动画库中定义好的类名。例如，第3行的“animated bounceInLeft”包含两个类名，animated是基本的类名，任何想实现动画的元素都要添加它;bounceInLeft是动画的类名，bounceInLeft表示入场动画，bounceOutLeft表示出场动画。
(4)在demo02.html文件中编写JavaScript代码，具体代码如下：
var vm = new Vue({ el: '#app', data: (show:true) })(5)保存代码，在浏览器中运行程序。单击“显示/隐藏”按钮，即可看到文字显示或隐藏的动画效果。
最新资讯
0
分享到：
苏公网安备 32132202001156号