vue集成vue2-animate插件实现常用动画

朴灿烈づ我的快乐病毒、 2022-01-29 07:53 706阅读 0赞

###                                 vue2集成vue2-animate插件实现常用动画 ###

vue的一些常用动画animate css来实现，针对vue2出现了一款插件vue2-animate,其实更权威的介绍在这里欢迎访问[https://www.npmjs.com/package/vue2-animate][https_www.npmjs.com_package_vue2-animate]，看一下如何使用呢？

一、安装

npm install --save vue2-animate

二、main.js引入, 加入以下这句

import 'vue2-animate/dist/vue2-animate.min.css'

三、使用，在XXX.vue界面，脚手架生成的vue页面模板都是固定的

<template>
      <transition name="bounce" enter-active-class="bounceInLeft" leave-active-    
       class="bouceOutRight">
        <div>
          ---------------------------------------
          ---------------------------------------
          ---------------------------------------
          ---------------------------------------
        </div>
      </transition>
    </template>

关于name共有以下这几种

Bounce

*  `bounce`
 *  `bounceDown`
 *  `bounceLeft`
 *  `bounceRight`
 *  `bounceUp`

Fade

*  `fade`
 *  `fadeDown`
 *  `fadeDownBig`
 *  `fadeLeft`
 *  `fadeLeftBig`
 *  `fadeRight`
 *  `fadeRightBig`
 *  `fadeUp`
 *  `fadeUpBig`

Rotate

*  `rotate`
 *  `rotateDownLeft`
 *  `rotateDownRight`
 *  `rotateUpLeft`
 *  `rotateUpRight`

Slide

*  `slideDown`
 *  `slideLeft`
 *  `slideRight`
 *  `slideUp`

Zoom

*  `zoom`
 *  `zoomDown`
 *  `zoomLeft`
 *  `zoomRight`
 *  `zoomUp`

可以试试效果

[https_www.npmjs.com_package_vue2-animate]: https://www.npmjs.com/package/vue2-animate

发表评论取消回复

表情：

评论列表（有 0 条评论，706人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-cli常用插件集合

[ element][element] \- 饿了么出品的Vue2的web UI工具套件 [Vux][] \- 基于Vue和WeUI的组件库 [m

淩亂°似流年/ 2023年08月17日 16:15/ 0 赞/ 55 阅读

相关 Vue常用插件汇总

框架 1. [element][] - 饿了么出品的Vue2的web UI工具套件 2. [mint-ui][] - Vue 2的移动UI元素 3. [iview]

傷城~/ 2022年12月18日 02:56/ 0 赞/ 279 阅读

相关 vue 常用插件

插件Day.js 时间戳转换 demo：[https://mp.csdn.net/console/UserLevel][https_mp.csdn.net_console_U

淡淡的烟草味﹌/ 2022年12月12日 02:15/ 0 赞/ 154 阅读

相关 vue常用插件

better-scroll(页面平滑滚动) fastclick(取消移动端点击延迟) vant(ui组件库可适用于移动端 ) element-ui (ui组件)

妖狐艹你老母/ 2022年12月05日 12:12/ 0 赞/ 22 阅读

相关 vue项目常用插件

1. nprogress (进度条) 配套引用normalize.css样式 2. axios（数据请求） 3. swiper -》vue-awesome-swiper（

喜欢ヅ旅行/ 2022年11月28日 10:44/ 0 赞/ 205 阅读

相关 Vue+Openlayer中实现动画animate

参考：[https://blog.csdn.net/qq\_29722281/article/details/103834483][https_blog.csdn.net_qq

拼搏现实的明天。/ 2022年09月07日 14:56/ 0 赞/ 230 阅读

相关 Vue常用集成插件

本篇文章仅做记录，方便以后使用一、axios 基于promise用于浏览器和node.js的http客户端特点安装：项目中安装(npm install

冷不防/ 2022年04月10日 11:59/ 0 赞/ 395 阅读

相关 atom中开发vue常用插件

atom: 开发利器，界面友好，配色出色，好用的插件众多。 language-vue: 这个是首推，因为它就是为vue而生的呀，支持很多vue里的提示。在空的vue页面

小鱼儿/ 2022年03月02日 10:06/ 0 赞/ 576 阅读

相关 vue集成vue2-animate插件实现常用动画

vue2集成vue2-animate插件实现常用动画 vue的一些常用动画animate

朴灿烈づ我的快乐病毒、/ 2022年01月29日 07:53/ 0 赞/ 707 阅读

相关 vscode开发vue常用插件

常用vue开发插件 Vetur （必备）—— 语法高亮、智能感知、Emmet等（能够让App.vue中的代码亮起来）包含格式化功能， Alt+Shift+F （格式

比眉伴天荒/ 2021年11月23日 00:16/ 0 赞/ 586 阅读