vue对话框使用animate.css(样式篇)

最新推荐文章于 2024-09-14 09:34:07 发布

skyblue_afan

最新推荐文章于 2024-09-14 09:34:07 发布

阅读量496

点赞数 1

分类专栏： web前端 vue.js animate.css 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/skyblue_afan/article/details/123271797

版权

vue.js 同时被 3 个专栏收录

49 篇文章 1 订阅

订阅专栏

web前端

41 篇文章 3 订阅

订阅专栏

animate.css

1 篇文章 0 订阅

订阅专栏

1、首先安装animate.css

npm安装

npm install animate.css --save

有淘宝镜像，使用cnpm安装

cnpm install animate.css --save

2、安装完成后，可在package.json文件中查看是否安装成功

在这里插入图片描述

3、在main.js中引入，使用

//引入
import animated from 'animate.css'
//使用
Vue.use(animated)

4、vue页面中使用

<transition enter-active-class="animate__animated animate__bounceInRight" leave-active-class="animate__animated animate__bounceOut" :duration="1000">
	<el-dialog v-if="dialogVisible" :title="页面动画" :visible.sync="dialogVisible" width="550px">
        <template slot='title'>
          <span style="font-size:16px;font-weight:700;color:#464c5b">页面动画</span>
        </template>
        <div>页面动画</div>	
   </el-dialog>
</transition>

5、附带一张animate.css效果图地址，需要什么效果替换就行

animate.css效果图地址

6、注意

（1）前面animate__animated一定要放，后面那个便是要使用的动画类名。
（2）enter-active-class //开始动画加在这里面。
（3）leave-active-class //结束动画加在这里面。
（4）duration，动画执行时间，一般加这个没用，得去node_moudles中修改。
（5）infinite，无限循环这个效果。