Vue簡單的動畫案例
阿新 • • 發佈:2019-01-03
<template> <div class="page page1"> <button @click="dianji">點選</button> <transition name="donghua"> <div class="block" v-if="show"></div> </transition> </div> </template> <script> export default { data() { return { show: true } }, methods: { dianji: function() { this.show = !this.show } } } </script> <style> .page1 { position: fixed; width: 100%; height: 200px; font-size: 36px; } .block { width: 200px; height: 100px; background: lightblue; } .donghua-enter-active, .donghua-leave-active { position: absolute; transition: all .5s; transform: translate3d(0px, 0px, 0px); } .donghua-enter, .donghua-leave-to { position: absolute; transform: translate3d(200px, 0px, 0px); } </style>