微客导航 » 文章资讯 » Vue中多元素过渡特效的解决方案

Vue中多元素过渡特效的解决方案

2023-08-02 02:41:04 159

常见示例

最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：


0">


Sorry,noitemsfound.

下面是一个例子



清空数据
重置

0">
{{item}}

Sorry,noitemsfound.

同标签名称

如果是相同标签名的元素切换时，Vue为了效率只会替换相同标签内部的内容



toggle

Jb51
JB51

由下面的示例可知，两个相同的p元素切换时，无过渡效果

因此，对于具有相同标签名的元素切换的情况，需要通过key特性设置唯一的值来标记以让Vue区分它们


toggle

Jb51
JB51

替代if

在一些场景中，可以给通过给同一个元素的key特性设置不同的状态来代替v-if和v-else


Save
Edit

上面的例子可以重写为



{{isEditing?'Save':'Edit'}}

下面是一个例子



toggle


{{isEditing?'Save':'Edit'}}

使用多个v-if的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡


Edit
Save
Cancel

可以重写为


{{buttonMessage}}

computed:{
buttonMessage:function(){
switch(this.docState){
case'saved':return'Edit'
case'edited':return'Save'
case'editing':return'Cancel'
}
}
}

下面是一个例子



change

{{message}}

过渡模式

先看下面这个例子




{{isOn?'On':'Off'}}

在“on”按钮和“off”按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是的默认行为-进入和离开同时发生

同时生效的进入和离开的过渡不能满足所有要求，所以Vue提供了过渡模式

in-out:新元素先进行过渡，完成之后当前元素过渡离开。

out-in:当前元素先进行过渡，完成之后新元素过渡进入。

in-out

下面使用in-out来重写之前的开关按钮过渡



{{isOn?'On':'Off'}}

out-in

下面使用out-in来重写之前的开关按钮过渡



{{isOn?'On':'Off'}}

滑动过渡

当元素设置为绝对定位，并互相覆盖，实现透明度过渡效果




{{isOn?'On':'Off'}}

下面是一个使用absolute和translate实现的类似滑动

如果设置in-out模式，将实现更酷的滑动效果




{{isOn?'On':'Off'}}

多组件过渡

多个组件的过渡简单很多，不需要使用key特性。相反，只需要使用动态组件

下面是一个例子



切换页面





            
        
        
        
            
                随机推荐
                
                                            
                            layui lay-verify form表单自定义验证规则详解
                        
                                            
                            Python 元组操作总结
                        
                                            
                            python sorted函数的小练习及解答
                        
                                            
                            layui复选框限制选择个数的方法
                        
                                            
                            C++编程产生指定范围内的随机数
                        
                                            
                            微信小程序获取地理位置及经纬度授权代码实例
                        
                                            
                            layui 富文本赋值，取值，取纯文本值的实例
                        
                                            
                            layui 富文本编辑器和textarea值的相互传递方法
                        
                                            
                            详解MySQL 5.7 MGR单主确定主节点方法
                        
                                            
                            python3使用GUI统计代码量
                        
                                            
                            asp.net core razor自定义taghelper的方法
                        
                                            
                            弄懂这56个Python使用技巧(轻松掌握Python高效开发)
                        
                                            
                            python之yield和Generator深入解析
                        
                                            
                            layui输入框中只允许输入整数的实现方法
                        
                                            
                            Vue Components 数字键盘的实现
                        
                                            
                            Python传递参数的多种方式(小结)
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            3162201930
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 微客导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图