Question

我尝试在更改页面之间添加转换，但我无法理解内部嵌套子项的热门用法。如果我将在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>

Answer 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

关于Vue过渡，有一个非常详细的官方documentation page。

在<router-view>中进行转换

1 个答案: