相关疑难解决方法(0)

我正在开发一个项目，其中我必须使用进入和离开动画来渲染一些组件，当组件进入屏幕时，它必须从底部进入，当它离开时，它必须向上执行，这是所需的行为是，当我更改组件标记的 :is 属性时，当前组件向上移动，下一个组件从底部移动，代码如下所示：

<template>
  <div class="home">
    <transition name="section">
      <component :is="activeSection"></component>
    </transition>
  </div>
</template>

<script>
import comp1 from './comp1';
import comp2 from './comp2';

export default {
  components: {
    comp1,
    comp2
  },
  data() {
    activeSection: 'comp1'
  }
</script>

<style scoped>
  .section-enter {
    top: 100vh;
  }
  .section-enter-to {
    top: 0vh;
  }
  .section-enter-active {
    animation-name: 'slideIn';
    animation-duration: 1s;
  }
  .section-leave {
    top: 0vh;
  }
  .section-leave-active {
    animation-name: 'slideOut';
    animation-duration: 1s;
  }
  .section-leave-to {
    top: -100vh;
  }


  @keyframes slideIn {
    from {
      top: 100vh;
    } …

我正在尝试做一个相当简单的可折叠菜单转换。我的元素看起来像：

<transition name="settings">
    <div v-show="!settingsCollapsed">
    </div>
</transition>

我的 css 看起来像

.settings-enter {
  max-height: 0px;
}
.settings-enter-active {
  max-height: 200px;
  transition: all 1s;
}
.settings-leave {
  max-height: 200px;
}
.settings-leave-active {
  max-height: 0;
  transition: all 1s;
}

我的菜单正确向上滑动，但是当它向下滑动时它没有动画。在我看来，它.settings-enter从未被应用过，它只是从隐藏到上课.settings-enter-active。

任何建议如何解决这个问题，或者为可折叠菜单设置动画的替代方法？