频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
vuetransition1.0到2.0的迁移,饿了么demo填坑攻略
2018-03-13 11:54:36      个评论    来源:weixin_38353851的博客  
收藏   我要投稿

1.0 版本实现detail组件的淡入淡出

html:

transition作为一个属性,可以取值。

css(stylus):

注意类名的写法,1.0的写法是&.fade-transition

    .detail
      transition all 0.5s
      &.fade-transition
        opacity 1
        background rgba(7,17,27,0.8)
      &.fade-enter,&.fade-leave
        opacity 0
        background rgba(7,17,27,0)

2.0版本:

html :

用transition标签把要实现的部分包裹起来

    

 

css:

    .detail
      opacity 1
      background rgba(7,17,27,0.8) //渐变结束后的最终效果
      &.fade-enter, &.fade-leave-active //v-enter:定义进入过渡的开始状态。渐变进入和退出时都历时0.5s
        transition all 0.5s
      &.fade-enter-active, &.fade-leave-active //定义刚进入和退出时的样式,即透明无色背景。
        opacity 0
        background rgba(7,17,27,0)

关于类名的含义和用途

过渡的类名

在进入/离开的过渡中,会有 6 个 class 切换。

1. v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

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

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除),在 transition/animation 完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

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

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除),在 transition/animation 完成之后移除。

点击复制链接 与好友分享!回本站首页
上一篇:如何将普通字符串转化为dom节点后插入页面?
下一篇:css中position:absolute和relative的知识点
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站