vue使用css库,Vue中使用animate.css库

Vue中使用animate.css库

先来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐藏：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

title在vue中使用Animate.css库/title

link rel="stylesheet" href="../animate.css"

script src="../vue.js"/script

style

@keyframes bounce-in {

0% {

transform:scale(0);

}

50% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

.fade-enter-active { /*在div隐藏的过程中这个class是一直存在的*/

transform-origin: left center;

animation: bounce-in 1s;

}

.fade-leave-active{ /*在div显示的过程中这个class是一直存在的*/

transform-origin:left center;

animation: bounce-in 1s reverse;

}

/style

/head

body

div id="root"

transition name="fade"

div v-if="show"hello world/div

/transition

button @click="handleClick"toggle/button

/div

script

var vm=new Vue({

el:"#root",

data:{

show:true

},

methods:{

hand