heyui 页面切换 动画

Heyui是一款基于Vue.js的UI框架，它提供了丰富的组件和动画效果，其中包括了页面切换动画。

在Heyui中，页面切换动画可以通过使用`hey-transition`组件和CSS过渡来实现。我们可以在`<router-view>`标签上添加`hey-transition`组件，并设置不同的过渡效果，以实现页面切换时的动画效果。

例如，我们可以为页面切换添加一个淡入淡出的动画效果。首先，在`<router-view>`标签的外部添加`hey-transition`组件，设置过渡类型为`fade`：

<hey-transition name="fade">
  <router-view></router-view>
</hey-transition>

然后，在组件的样式中定义该过渡效果：

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

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

这样，当页面切换时，新页面会以淡入的效果显示，旧页面则以淡出的效果消失。

除了淡入淡出效果，Heyui还提供了其他种类的过渡效果，如滑动、缩放等，可以根据实际需求进行设置。

总体来说，Heyui提供了一种简单易用的方式来实现页面切换动画。通过使用`hey-transition`组件和CSS过渡，我们可以为页面切换添加各种效果，提升用户体验。