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>
因为刚接触过度动画不久, 不明就里的东西还很多,今后再慢慢补充吧
上一篇: Vue 过度动画
下一篇: LinearLayout的动画效果
推荐阅读