使用vue的transition完成滑动过渡的示例代码

使用vue的transition可以实现页面元素的过渡动画，如做一个图片的滑动过渡效果，下面就详细说明下使用vue的transition完成滑动过渡的示例代码。

我们假设现在有一个页面中需要实现一个图片的滑动过渡效果，这个滑动过渡效果需要实现图片从左往右滑动，同时有淡入淡出的效果。

首先需要在template模板中编写transition标签，如下所示：

<transition name="slide" mode="out-in">
  <img src="图片地址" alt="图片描述">
</transition>

其中name属性表示该过渡效果的名称，mode属性表示过渡模式，out-in表示同级元素的离开过渡必须在进入过渡完成后才开始，这样就可以保证过渡效果的正确展现。

然后在style标签中编写过渡效果的样式，如下所示：

.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

使用vue的transition完成滑动过渡的示例代码就完成了。下面再举几个示例进行说明：

示例一

实现一个图片的淡入淡出过渡效果：

<transition name="fade">
  <img src="图片地址" alt="图片描述">
</transition>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

示例二

实现一个列表的滑动过渡效果：

<transition-group name="list" tag="ul">
  <li v-for="(item, index) in items" :key="index">{{item}}</li>
</transition-group>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter,
.list-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}