TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

Vue商品详情页(过渡效果)

zyz
2021-04-06
/
0 评论
/
23 阅读
/
正在检测是否收录...
04/06

一、概述

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。但有时候并不能满足我们现有需求时,这时候自定义进入、离开和列表的过渡效果。

二、transitio组件

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡。

# 适合的场景
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点

三、过渡中的类型

在进入/离开的过渡中,会有 6 个 class 切换,其中<transition>元素可以添加name属性。

# 组件说明
<transition name='xxx' >  需要添加过渡的内容  </transition>

# 类名说明
# name属性拼接上以下内容
xxx-enter (进入)过渡开始状态
xxx-enter-to (进入)过渡结束的状态
xxx-enter-active (进入)过渡时间、延迟、曲线

xxx-leave (离开)过渡开始状态
xxx-leave-to (离开)过渡结束的状态
xxx-leave-active (离开)过渡时间、延迟、曲线

四、项目中的使用

  • 场景说明(首页HomeView.vue中的商品点击后,跳转到商品详情GoodsDedetailView.vue
  • HomeView组件

    # goodsDetailShow属性,即是用于控制商品详情的显示或隐藏的
    <transition name='slide-to-left'>
        <GoodsDetailView v-if='goodsDetailShow'></GoodsDetailView>
    </transition>
  • App.vue组件(界面切换效果很多页面都需要,所以放置在这个位置)

    /* 从右边到左边 */
    /* 设置进入和离开的过渡时间*/
    .slide-to-left-enter-active,
    .slide-to-left-leave-active{
        transition: all 2s;
    }
    
    /* 商品详情虽然被隐藏,但还是距离屏幕左边是0,在设置显示时,即是过渡开始时,就让商品详情视图移到屏幕的右侧,从而达到从右到左出来的效果 */
    /* 商品详情页显示即距离屏幕左边为0,在设置隐藏时,即到过渡结束的状态,就是从屏幕左边到屏幕的右侧 */
    .slide-to-left-enter,
    .slide-to-left-leave-to{
        transform: translateX(100%);
    }
赞(0)
评论 (0)