标签: vuejs-transition

我想在一个父v-if状态更改内设置多个过渡（在单独的子元素上）。

例如，当我显示模态时，我希望背景模糊fadeIn（使用不透明度），模态内容到slideIn（使用过渡或动画）。我当前的情况如下，当我使用过渡时，背景模糊元素（.modal）与内容（.modal__content）一起过渡：

<transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
  <div class="modal" v-if="isVisible">
    <div class="modal__content">
      </slot><slot/>
    </div>
  </div>
</transition>

我正在尝试将 vuejs 转换应用于 Bootstrap 网格，但它完全搞砸了网格系统，因为转换组修改了 DOM 并在row和col-md-6标签之间添加了一个新标签。例子：

<div class="row">
  <transition-group name="list">
    <div class="col-md-6" v-for="product in products" :key="product.id">\ 
      My product content here
    </div>
  </transition-group>

当它被渲染时，它被修改为：

<div class="row">
  <span>
    <div class="col-md-6" v-for="product in products" :key="product.id">\ 
      My product content here
    </div>
  </span>
</div>

新span标签弄乱了网格系统，因为.col-md-6它不再是.row.

任何人都知道仍然使用 Bootstrap 网格的解决方法吗？

我已经做了差不多一年的vuejs了，但是我从来没有真正地使用过动画和过渡效果，这对我来说似乎还很不清楚，但是今天我决定尝试并最终理解它们，但是我又一次卡住了，过渡根本就行不通，而且我不明白自己在做什么错。这是我的代码：

HTML

<div id="app">
 <div class="row">
      <div class="container-fluid">
        <transition-group name="flip-list" tag="div" class="row horizontal-scroll">
          <div class="col-xs-12 col-md-2 col-lg-2 col-card" 
            v-for="(someCard, index) in someCards" v-bind:key="index">
            <div class="some-card" @click="changeOrder(someCard)">
              {{ someCard.someTitle }}
            </div>
          </div>
        </transition-group>
      </div>
    </div>
</div>

JS

new Vue({
  el: "#app",
  data: {
    someCards: [
          {
            order: 2,
            someTitle: 'Title 1'
          },
          {
            order: 2,
            someTitle: 'Title 2'
          },
          {
            order: 2,
            someTitle: 'Title 3'
          },
          {
            order: 3,
            someTitle: 'Title 4'
          },
          {
            order: 3,
            someTitle: 'Title 5'
          },
          { …