vue transition 过渡

最新推荐文章于 2024-04-15 16:31:02 发布

v折耳

最新推荐文章于 2024-04-15 16:31:02 发布

阅读量2.8k

点赞数

分类专栏： vue 文章标签： transition vue过渡效果

本文链接：https://blog.csdn.net/wngzhem/article/details/53672739

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

transition 的使用

props:

1.name 过渡名，会自动生成拓展的过渡的class名

2.过渡class:enter-class,leave-class,enter-active-class,leave-active-class,appear-class,appear-active-class,

(也可以使用过渡名-[enter|leave|enter-active....] 在css 直接各个状态的样式)

3.appear -boolean 是否在初始渲染使用过渡

4.css-boolean 是否使用css过渡

5.type [transition|animation] 自动检测

6.mode [out-in|in-out]控制离开/进入的过渡时间序列

event：

1.before--enter

2.enter

3.after-enter

4.before-leave

5.leave

6.after-leave

7.before-appear

8.appear

9.after-appear

ps:

appear -class 需要先使用 prop appear

 
 
  
  <transition
 
 
 
   
  
  appear
 
 
 
   
  
  appear-class=
  
  "...."
 
 
 
   
  
  appear-active-class=
  
  "...."
 
 
 
 
  
  >

vue为了知道过渡完成，会自动识别transitionend or animationend,在同时使用两个方式时，需要使用type 申明监听类型

可以结合第三方的过渡动画使用，下面例子，我使用的是animation.css的动画效果

 <body>
        <div id="app">
             <button v-on:click="show = !show">
                Toggle
              </button>
              <transition
              @before-enter='al'
               enter-active-class="animated bounceIn"
                name="ani">
                <p v-if="show"   >hello</p>
              </transition>
        </div>

    </body>
    <script>

        var app=new Vue({
            el:"#app",
            data:{
                show:true,
                cla:'daf',
                statu:false
            },
            methods:{
                al:function(){
                        alert(111)
                    }
                },
                components:{
                    'zan':{
                        template:'<div>+1</div>'
                    }
                }
        });

    </script>

注意：

对相同的元素切换时，需要在元素使用prop key来标记唯一值，

<transition> 与<compoment>可以配合使用

v折耳

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue transition 过渡

transition 的使用props:1.name 过渡名，会自动生成拓展的过渡的class名2.过渡class:enter-class,leave-class,enter-active-class,leave-active-class,appear-class,appear-active-class,(也可以使用过渡名-[enter|leave|enter-active.
复制链接

扫一扫