vue动画 使用animate实现动画
第一步:下载依赖npm install animate.css --save第二步:script中引入import animate from "animate.css";第三步:使用完整代码:<template><div class="hello"><input type="button" value="button" @click="...
·
第一步:下载依赖
npm install animate.css --save
第二步:script中引入
import animate from "animate.css";
第三步:使用
完整代码:
<template>
<div class="hello">
<input type="button" value="button" @click="flag=!flag" />
<transition enter-active-class="**animated** bounceIn" leave-active-class="**animated** bounceOut" :duration="200">//duration调节速度
<h1 v-if="flag">这是一个自定义v-前缀的动画</h1>
</transition>
</div>
</template>
<script>
import animate from "animate.css";
export default {
name: "HelloWorld",
data() {
return { flag: false };
},
mounted() {}
};
</script>
<style scoped>
</style>
有些人不用加animated也能用 视自己情况而定
附上官网:https://daneden.github.io/animate.css/
更多推荐
已为社区贡献2条内容
所有评论(0)