0

我定义了一个主菜单组件（vue 2.6.11），它基本上是标准的 Bootstrap 菜单。不是 bootstrap-vue，而是纯 bootstrap。

在我的最后一个菜单条目中，我需要一个额外的右边距来容纳我在其中一个页面上拥有的其他内容。我希望余量能缓和一些，以使体验不那么刺耳。所以我这样宣布：

<div id="navbarContent" class="collapse navbar-collapse">
  <ul class="navbar-nav ml-auto">
    ... other menu entries...
    <li :class="`nav-item ${isActive('/contact')} optional-margin ${extraMarginOnMainPage()}`">
      <router-link class="nav-link" to="/contact">{{ gettext('Contact') }}</router-link>
    </li>

....
methods: {
  extraMarginOnMainPage() {
    return this.$route.path === '/' ? 'margin-showing' : '';
  },

....
<style scoped>
.optional-margin {
  transition: margin 500ms;
}
.optional-margin.margin-showing {
  margin-right: 10em;
}
</style>

目的是菜单的整个右对齐部分会在添加边距时缓慢地向左滑动，并在删除边距时回到浏览器右边缘。

但是，这不起作用：如果我明白了什么，因为浏览器根本看不到过渡，因为 DOM 从 v-dom 重新渲染。我至少在这个评估中是对的吗？

我将如何正确处理这个动画？

4

0 回答 0