vue 动画

点击按钮 文字 向左右飘动 显示隐藏

<template>
  <div >
    <button @click="flag= !flag">按钮</button>
    <transition>
      <div v-show="this.flag">我要动起来</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true
    };
  }
};
</script>

<style>
/* 
v-enter 动画进入之前 此时还没开始进入
v-leave-to离开之后 终止状态
*/
.v-enter,
.v-leave-to {
  opacity: 1;
  transform: translateX(150px);
}
/* 
v-leave-active 离场动画的时间段
v-enter-active 入场动画的时间段
*/
.v-leave-active,
.v-enter-active {
 
  transition: all 0.8s ease;
  opacity: 0.5;
}

.bigData {
  width: 500px;
  height: 500px;
  background-color: #fff;
}
</style>