vue页面切换过渡transition效果

下面将详细讲解怎样实现vue页面切换过渡transition效果。

简介：

Vue提供了多种切换过渡效果，通过以下两种方式实现：

1. 在<transition>包裹下的元素，添加过渡类名
2. 设置命名的名称作为组件的立场

第一种方式：

html代码：

<transition name="fade">
    <p v-if="show">hello world</p>
</transition>

css代码：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to
/* .fade-leave-active in version 2.1.8 and below */
{
  opacity: 0;
}

以上代码实现了淡入淡出的过渡效果，当v-if指令的值从false变为true时，元素从隐藏状态下的渐变淡出，当从true到false反之。

第二种方式：

html代码：

<transition name="slide">
  <router-view class="router-view"></router-view>
</transition>

js代码：

.enter-active, .leave-active {
  transition: all 0.3s ease;
}
.enter, .leave-to{
  transform: translateX(100%);
  opacity: 0;
}

以上代码实现了页面切换横向滑动的过渡效果。

注意事项：

• name属性可以接收一个字符串、对象或动态组件
• 在过渡过程中添加 target 类名。
• 命名的名称必须放在.vue文件里。
• 可以使用JavaScript时序动画库实现 Vue 的过渡效果，如：TweenMax 和 Animate.js。

以上就是实现vue页面切换过渡transition效果的完整攻略，希望你可以有所收获。