skyeye-vue-transition-animate

自定义 transition 动画

Usage no npm install needed!

<script type="module">
  import skyeyeVueTransitionAnimate from 'https://cdn.skypack.dev/skyeye-vue-transition-animate';
</script>

README

自定义动画

Vue中可以对使用v-for, v-if, v-show的元素使用动画transition 通过和animate.css动画库的结合,自定义了多种类型的动画:

slide:slideLR, slideRL, slideUD, slideDU
fade: fadeLR, fadeRL, fadeUD, fadeDU
bounce: bounceLR, bounceRL, bounceUD, bounceDU
flip: flipX, slipY
lightSpeed: lightSpeedIn, lightSpeedOut
roll: rollIn, rollOut
zoom: zoomIn, zoomOut
*其中,
*      L: left     *
*      R: right    *
*      U: up       *
*      D: down     *
分别可以实现相应元素在进入或删除时的动画效果,后续动画类型还会继续扩展

使用

在使用动画时,在需要使用动画的元素上加入animated类,
同时设定该元素的transition属性为上面的一种即可。

动画钩子函数

在methods选项中可以定义以下集中动画钩子函数,分别在动画的几个不同阶段执行:
transitionBeforeEnter
transitionEnter
transitionAfterEnter
transitionEnterCancelled
transitionBeforeLeave
transitionLeave
transitionAfterLeave
transitionLeaveCancelled

例子

<div class="animated" transition="slideLR" v-show="某个条件">
表示:该div元素在插入删除的动画是:从左边slide进入,从右边slide退出

安装

如下‘FILE_PATH’代表vue-transition-animate的文件路径
// 全局
<script src="FILE_PATH"></script>
Vue.use(VueTransitionAnimate)

// AMD
define([FILE_PATH], function(VueTransitionAnimate){
    Vue.use(VueTransitionAnimate)
})
require([FILE_PATH], function(VueTransitionAnimate){
    Vue.use(VueTransitionAnimate)
})

// CommonJS
var VueTransitionAnimate = require(FILE_PATH)
Vue.use(VueTransitionAnimate)

// ES6
import VueTransitionAnimate from FILE_PATH
Vue.use(VueTransitionAnimate)

示例运行

运行环境:node
进入build目录执行node server.js启动服务