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.

v折耳

2914人浏览 · 2016-12-15 17:04:37

v折耳 · 2016-12-15 17:04:37 发布

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>可以配合使用

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^