<router-view> 内的转换答案

【问题标题】：transition inside <router-view><router-view> 内的转换
【发布时间】：2018-09-09 15:01:17
【问题描述】：

我尝试在更改页面之间添加过渡，但我无法理解内部嵌套子项的热使用。如果我将包装在 app.vue 中，它将为所有块设置动画：

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view class="view"></router-view>
    </transition>
  </div>
</template>

但我只需要动画内容组件，但它现在可以工作

例如结构 index.vue:

<template>
<div>
    <header-component></header-component>
    <div class="content" id="content">
        <transition name="fade">
            <content-component :content="content"></content-component>
        </transition>
        <div class="buffer"></div>
    </div>
    <footer-component></footer-component>
</div>

【问题讨论】：

标签： vue.js transition vue-router

【解决方案1】：

您所要做的就是定义转换类。

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

一个例子：https://codepen.io/anon/pen/xWjZgM

官方有很详细的documentation page关于Vue转场。

【讨论】：