8

我想在一个父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>
4

1 回答 1

1

您可以在淡入后使用JS 挂钩.modal来触发幻灯片动画:

<template>
  <transition name="fade" @after-enter="showContent = true">
    <div class="modal" v-if="isVisible">
      <transition name="slide">
        <div class="modal__content" v-if="showContent">
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
export default {
    data() {
        return {
            isVisible: false,
            showContent: false
        };
    }
};
</script>
于 2018-04-15T17:19:32.173 回答