vue transition 和 animate.css同时使用

// https://www.dowebok.com/98.html animate.css下载链接
<template><div><p>vue 同时使用transition 和 animate.css</p><button @click="change"> 触发动画</button><!-- 自定义name 以及使用animated.css,添加apper实现页面刷新第一次触发动画type="transition" 定义以transition时长为准 animated默认时长1s--><transitionname='fade':duration="{enter:5000,leave:10000}"appearenter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active"apper-active-class = "animated swing"><div class="div" v-if="show">hello </div></transition></div>
</template><script type="text/ecmascript-6">
export default {data() {return {show: true,}},methods: {change() {this.show = !this.show}},components: {}
}
</script><style lang="scss">.div {width: 200px;height: 200px;background-color: pink;&.fade-enter ,.fade-leave-to{opacity: 0;}&.fade-enter-active,.fade-leave-active{transition: opacity 10s;}
}
</style>