本文主要是介绍Vue学习笔记5.3 使用animate时同时使用自定义动画效果。 appear :duration，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html>
<head><title>CSS过渡与动画效果</title><script src="vue.js"></script><link rel="stylesheet" href="animate.css">
//2.自定义样式<style>.fade-enter, .fade-leave-to {opacity: 0;}.fade-enter-active, .fade-leave-active {transition: opacity 3s;}</style>
</head>
<body><div id="app"><transitionname="fade"//4.有时候我们不希望使用第三方库的样式规定的时间。想自己定时间。那就可以用:duration
// 如果不想写这么复杂的话那就直接写：:duration=“10000” 单位是毫秒
// 或者可以使用type="transition" 表示使用transition样式的时间标准（3s）
// 不过这里要注意 如果使用了type的话 appear将无效:duration="{enter: 5000, leave: 10000}"//1.可以再使用了animate样式之后再添加自定义样式。只需要在animated样式的后面再添加自定义样式名称即可enter-active-class="animated swing fade-enter-active"leave-active-class="animated shake fade-leave-active"//3.appear是页面在刷新或载入的时候显示的样式appearappear-active-class="animated flash"><div v-if="show">Hello World</div></transition><button @click="handleClick">切换</button></div>
</body>
<script>var vm = new Vue({el: '#app',data: {show: true},methods: {handleClick: function() {this.show = this.show ? false : true}}})
</script>
</html>再强调一下：
要注意 如果使用了type的话 appear将无效
这篇关于Vue学习笔记5.3 使用animate时同时使用自定义动画效果。 appear :duration的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
