欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue过度动画效果

程序员文章站 2022-05-02 20:05:52
...

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

	进入前	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>

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

相关标签: javascript