一个简单的transition动画
定义Child组件:
<template> <transition name="slide"> <div id="child" v-show="isShow"> <h1>子组件</h1> <button @click="isShow=false">按钮</button> </div> </transition> </template> <script> export default { data() { return { isShow: false } } } </script> <style> #child { display: flex; justify-content: center; align-items: center; position: fixed; left: 0; right: 0; bottom: 70px; top: 0; background-color: green; } .slide-enter-active, .slide-leave-active { transition: all 0.2s linear; } .slide-enter, .slide-leave-to { transform: translate3d(100%, 0, 0); } .slide-enter-to, .slide-leave { transform: translate3d(0, 0, 0); } </style>
App.vue
<button @click="$refs.childRef.isShow = true">按钮</button> <Child ref="childRef"></Child>
效果:右侧滑入滑出