vue------------自定义样式实现过渡动画

文档中表明,添加过渡动画的前提有这几个 1.为元素添加v-if或者v-show 2.将元素包裹在transition标签中 3.为transition标签设置name属性,这个name值就是后期样式的前缀 4.为六个时机设置合理的样式,vue会在恰当的时机调用对应的样式 (进入:v-enter ,v-enter-active, v-enter-to) (离开:v-leave, v-leave -active ,v-leave -to)

.<template>
  <div>
    <!-- 单击按钮时取反:显示时消失,消失时出现 -->
    <button @click="isshow = !isshow">按钮</button>
    <!-- 包裹在transition里面,vue提供了封装,可以给任何元素和组件添加进入/离开过渡 -->
    <transition name="move"> <p v-show="isshow">我飘了</p> </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始时隐藏
      isshow: false,
    };
  },
};
</script>

.<style lang="less" scoped>
p {
  width: 200px;
  background: cadetblue;
}
// 开始进入
.move-enter {
  margin-left: 300px;
  opacity: 0;
}
// 进入中的过程
.move-enter-active {
  transition: all 1s;
}
// 进入完毕
.move-enter-to {
  margin-left: 0;
  opacity: 1;
}
// 准备离开
.move-leave {
  margin-left: 0;
  opacity: 1;
}
// 离开的过程
.move-leave-active {
  transition: all 1s;
}
// 离开完毕
.move-leave-to {
  margin-left: 300px;
  opacity: 0;
}
</style>