vue中transition标签的使用(一)
transition to标签的使用transition标签上的name要和需要用到的css样式的开头一致官方一共提供了6个样式注:css样式开头的sky是可以随意命名的,只需与transition标签上的name属性的值一致即可。动画类之间不要使用其他类隔开,否则会失效。自定义过渡class名注:自定义class动画会自动覆盖原有的动画:duration 定义动画持续时间:duration也可以
transition to标签的使用
transition类名变更
v-enter→v-enter-from
v-leave →v-leave-from
transition标签上的name要和需要用到的css样式的开头一致
官方一共提供了6个样式
注:
css样式开头的sky是可以随意命名的,只需与transition标签上的name属性的值一致即可。
动画类之间不要使用其他类隔开,否则会失效。
自定义过渡class名
注:
自定义class动画会自动覆盖原有的动画
:duration 定义动画持续时间
:duration也可以单独设置进入和离开时间。
并且设置了可以有一定的延时作用(比如把enter的时间加长,比如10000毫秒和ok设为false,这样动画结束就会停留10000毫秒)
transition生命周期
transition标签上的 @before-enter和@enter 就是transition的生命周期
六个生命周期
enter和leave的第二参数done
@enter生命周期调用的enter方法中,使用第二个参数done,可以直接跳过动画的过程
注意:
如果Enter有第二个参数done,却不使用,生命周期afterEnter会失效
:css 属性
:css 可以根据true和fasle来执行或者消除动画(值不执行css)
注:
enter和leave如果不给第二个参数的话,可以被调用,根据持续时间结束。
transition标签上的:css属性的值如果为false,则没有动画,默认为true。
所有生命周期函数的第一个参数代表的就是动画元素。
enter,leave生命周期的第二个参数调用后会执行下一个生命周期函数,否则动画用不结束。
更多推荐
所有评论(0)