使用Vue动画SPA状态

Question

所以我有一个活跃的Vue.js SPA。我想为每个“页面”之间的过渡设置动画。我将路由器包含在转换标记中，如下所示：

          <transition name="example">
              <router-view></router-view>
          </transition>

然后我按照这样的方式应用一些css：

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

    .example-leave, .example-enter-to{
        opacity:1;
    }

    .example-enter-active, .example-leave-active{
        transition: opacity 500ms;
    }

它的作用是，它在视图中消失，但是当它存在时，新视图从底部出现，而不是仅仅淡出和淡入。所以我在这里缺少什么？是因为我将路由器视图包装在转换标签中吗？

Answer 1

没关系，我明白了。在示例 - leave上，example-enter-to需要更改为不透明度0。