Vue 状态过度

2022-10-13
山东
本文字数：899 字
阅读完需：约 3 分钟

状态过渡

Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：

数字和运算
颜色的显示
SVG 节点的位置
元素的大小和其他的 property

这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。

<style>.fade-enter-active, .fade-leave-active {    transition: opacity 2s}.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {    opacity: 0}</style></head><body><div id = "databinding"><button v-on:click = "show = !show">点我</button><transition name = "fade">    <p v-show = "show" v-bind:style = "styleobj">动画实例</p></transition></div><script type = "text/javascript">var vm = new Vue({el: '#databinding',    data: {        show:true,        styleobj :{            fontSize:'30px',            color:'red'        }    },    methods : {    }});</script></body>

复制代码

过渡其实就是一个淡入淡出的效果。Vue 在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8 版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8 版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

发布于: 刚刚阅读数: 5

默默的成长

关注

还未添加个人签名 2022-10-11 加入

还未添加个人简介

发布

暂无评论

创作场景

Vue 状态过度

状态过渡

默默的成长

评论