Vue中CSS动画原理(过渡动画效果)
2020-10-13 本文已影响0人
云凡的云凡
希望hello world 显示隐藏的时候有渐隐渐现的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19Vue中CSS原理(过渡动画效果)</title>
<script src="./vue.js"></script>
<style>
.myTransition-enter,
.myTransition-leave-to {
opacity: 0;
}
.myTransition-enter-active,
.myTransition-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<!-- <transition> 的意思是 它包裹的里面会有动画效果，Vue会自动的帮我们构建一个动画流程，可以给它取一个名字 -->
<transition name="myTransition">
<div v-if="show">hello world</div>
</transition>
<button @click="show = !show">change</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
},
})
</script>
</body>
</html>
