好资源导航 » 文章资讯 » Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

2023-08-02 02:50:03 53

以一个toggle按钮控制p元素显隐为例，如果不使用过渡效果，则如下所示


Toggle
蓝色理想

如果要为此加入过渡效果，则需要使用过渡组件transition

过渡组件

Vue提供了transition的封装组件，下面代码中，该过渡组件的名称为'fade'


蓝色理想

当插入或删除包含在transition组件中的元素时，Vue会自动嗅探目标元素是否应用了CSS过渡或动画，如果是，在恰当的时机添加/删除CSS类名

过渡类名

总共有6个(CSS)类名在enter/leave的过渡中切换

v-enter

定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除

v-enter-active

定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在transition或animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数

v-enter-to

定义进入过渡的结束状态。在元素被插入一帧后生效(与此同时v-enter被删除)，在 transition或animation完成之后移除

v-leave

定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除

v-leave-active

定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在transition或animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数

v-leave-to

定义离开过渡的结束状态。在离开过渡被触发一帧后生效(与此同时v-leave被删除)，在transition或animation完成之后移除

对于这些在enter/leave过渡中切换的类名，v-是这些类名的前缀，表示过渡组件的名称。比如，如果使用，则v-enter替换为my-transition-enter

transition

常用的Vue过渡效果都是使用CSS过渡transition，下面增加一个enter时透明度变化，leave时位移变化的效果



Toggle

蓝色理想

animation

CSS动画animation用法同CSS过渡transition，区别是在动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除

下面例子中，在元素enter和leave时都增加缩放scale效果



Toggle

蓝色理想

同时使用

Vue为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或animationend，这取决于给元素应用的CSS规则。如果使用其中任何一种，Vue能自动识别类型并设置监听。

但是，在一些场景中，需要给同一个元素同时设置两种过渡动效，比如animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，就需要使用type特性并设置animation或transition来明确声明需要Vue监听的类型



Toggle

蓝色理想

自定义类名

可以通过以下特性来自定义过渡类名

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class

自定义类名的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如Animate.css结合使用十分有用




Togglerender


蓝色理想

初始渲染过渡

可以通过appear特性设置节点的在初始渲染的过渡

这里默认和进入和离开过渡一样，同样也可以自定义CSS类名

下面是一个例子



还原

蓝色理想

过渡时间

在很多情况下，Vue可以自动得出过渡效果的完成时机。默认情况下，Vue会等待其在过渡效果的根元素的第一个transitionend或animationend事件。然而也可以不这样设定——比如，可以拥有一个精心编排的一序列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果

在这种情况下可以用组件上的duration属性定制一个显性的过渡效果持续时间(以毫秒计)

下面的代码意味着元素在进入enter和离开leave时，持续时间都为1s，而无论在样式中它们的设置值为多少

...

也可以分别定制进入和移出的持续时间

...

比如，下面的代码中，进入和移出的效果都为animate.css里面的shake效果，但持续时间分别是0.5s和1s


Toggle

小火柴的蓝色理想

过渡条件

一般地，在Vue中满足下列任意一个过渡条件，即可添加过渡效果

条件渲染(使用v-if)

常见的条件是使用条件渲染，使用v-if



Toggle

蓝色理想

条件展示(使用v-show)

使用条件展示，即使用v-show时，也可以添加过渡效果


Toggle

蓝色理想

动态组件

使用is属性实现的动态组件，可以添加过渡效果


Toggle





            
        
        
        
            
                随机推荐
                
                                            
                            家文化特点汇集之处 10款家庭背景墙推荐
                        
                                            
                            橱柜台面哪种好？石英石VS复合亚克力
                        
                                            
                            装修网解读家庭装修吊顶误区
                        
                                            
                            验房收费吗？验房费用按什么来计算？
                        
                                            
                            二手房装修的六点注意事项 远离装修隐患
                        
                                            
                            四个“三不”  完美小户型装修
                        
                                            
                            科勒浴缸怎么样 科勒浴缸好吗？
                        
                                            
                            筒灯和射灯的区分方法
                        
                                            
                            扬子地板怎么样 扬子地板价格
                        
                                            
                            客厅、厨房、卫生间瓷砖颜色要如何搭配？
                        
                                            
                            功能性瓷砖是真是假?
                        
                                            
                            合理布局玩转有限空间 魔力餐厅点睛生活
                        
                                            
                            仿古砖优缺点_仿古砖图片
                        
                                            
                            不是只有木地板环保 家居环保地板种类推荐
                        
                                            
                            室内照明五大原则搭配
                        
                                            
                            高端水晶灯选购指南
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




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