css过渡

作者: 树袋熊熊 | 来源:发表于2017-09-15 10:00 被阅读0次

进入/离开 时过渡的类名,有 6 个 class 切换

1.v-enter

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

2.v-enter-active

定义过渡的状态,在元素整个过渡中作用

3.v-enter-to

定义进入过渡的结束状态,在元素被插入一帧后生效,此时删除 v-enter

4.v-leave

定义离开过渡的开始状态

5.v-leave-active

定义过渡的状态,在离开过渡被触发后立即生效

6.v-leave-to

定义离开过渡的结束状态,在离开过渡被触发一帧后失效,此时删除v-leave

1.html

<transition name="fade">

     <p> hello </p>

</transition>

2.css

.fade-enter-active{

  ...................................

}

.fade-leave-active{

  ....................................

}

css 的类名为 <transition> 中的 “ name 属性 - 过渡类名 ”构成。

相关文章

  • 05_css中的过渡和动画效果了解吗

    一、CSS3 过渡 1、CSS3 过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果。 (1)实现过渡效...

  • CSS学习笔记——一些属性

    CSS3 transition 规定应用过渡效果(当指定的 CSS 属性改变时,过渡效果将开始)。 过渡效果通常在...

  • 119、VUE2 过渡效果---transition

    1.理解VUE---过渡效果 1. 过渡的-css-类名会有4个(css) 类名在 enter/leave 在过渡...

  • 动画

    1.css3-过渡 transition 过渡属性 过渡:css从一种状态变化到另一种状态的过程 transiti...

  • css过渡

    进入/离开 时过渡的类名,有 6 个 class 切换 1.v-enter 定义进入过渡的开始状态,在元素被插入时...

  • css过渡

    时间曲线:百度、贝塞尔曲线可视化

  • CSS过渡

    过渡使得我们可以在不使用Flash动画或者JavaScript的情况下,当元素从一种样式变换为另一种状态时为元素添...

  • css过渡

    当页面内某一个元素发生移动或者变化时,突然的变化会显得突兀,使用户体验不佳,因此我们可以使用css的transit...

  • CSS3动画

    css3动画包括过渡,形变,动画 过渡transition: 指定过渡样式:transition-property...

  • animation动画

    1、transition: 平衡过渡 transition :过渡效果的 CSS 属性的名称 完成过渡效果需要多少...

网友评论

      本文标题:css过渡

      本文链接:https://www.haomeiwen.com/subject/xbudsxtx.html