vue过度动画效果

整理一个自己可能常用到的过度动画效果

	进入前	v-entenr {}
	进入中	v-entenr-active {}
	进入后	v-entenr-to {}
    离开前	v-leave {}
    离开中	v-leave-active {}
    离开后	v-leave-to {}

<template>
	<div>
 		<transition name="del_input_show">
    		<p class="el-icon-close" v-show="delInputShow"></p>
 		</transition>
 	</div>
</template>

name=“del_input_show” 给动画起一个类名 以防有多个过渡动画互相干扰 用来区分

<script>
data() {
    return {
      delInputShow: false, //用来控制 p 标签的显示/隐藏
    };
  },
</script>
<style>
 	  // 过渡动画
        //进入前
        .del_input_show-entenr {
          opacity: 0;
          transform: translateX(10px);
        }
        //进入中
        .del_input_show-entenr-active {
          transition: all 1s;
        }
        //进入后
        .del_input_show-entenr-to {
          opacity: 1;
          transform: translateX(0);
        }
        //离开前
        .del_input_show-leave {
          opacity: 1;
          transform: translateX(0);
        }
        //离开中
        .del_input_show-leave-active {
          transition: all 1s;
        }
        //离开后
        .del_input_show-leave-to {
          opacity: 0;
          transform: translateX(10px);
        }
</style>

因为刚接触过度动画不久， 不明就里的东西还很多，今后再慢慢补充吧