zyz
Vue商品详情页(过渡效果)
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%); }