Question

我注意到，仅当<transition>元素是组件模板中的根元素时，才会触发过渡挂钩。这是设计使然吗？我想念什么吗？

在我的App.vue中，我有以下模板：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<example v-if = "checked"></example>

我的组件example.vue：

<template lang="html">

  <section class="example">
     <transition
        v-on:enter = "enter"
        v-on:leave = "leave">
        <div class = "transition-example"></div>
    </transition>
  </section>

</template>

<script lang="js">
  export default  {
    name: 'example',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {
      enter: function (el, done) {
        console.log("enter")
        done()
      },
      leave: function(el, done) {
        console.log("leave")
        done()
      }
    }
}
</script>

<style scoped >

</style>

在当前示例中，切换复选框时，永远不会执行enter和leave钩子。

如果我要更新example.vue的模板以确保<transitions>元素是根元素（如下所示），则会调用enter和leave钩子。

<template lang="html">

  <transition
    v-on:enter = "enter"
    v-on:leave = "leave">
    <div class = "transition-example"></div>
  </transition>


</template>

我想在放置<transition>元素或在组件中具有多个transition元素的位置上具有更大的灵活性，这些元素都有自己的钩子。

我假设我正在忽略一些阻止我执行此操作的事情。

Answer 1

我注意到，仅当元素是组件模板中的根元素时，才会触发过渡挂钩。这是设计使然吗？我想念什么吗？

是因为此行<example v-if="checked"></example>。 v-if适用于组件的实际根元素，因此当过渡位于根中时，v-if适用于过渡中的div，它可以正常工作，但在您的第一种情况下适用v-if到尚未过渡的section。因此，要使过渡工作正常进行，您应该在v-if标签包裹的元素中提供transition，可以通过传递checked作为指示可见性的道具：

App.vue

...
<example :visible="checked"></example>
...

Example.vue

<template lang="html">
  <section class="example">
     <transition
        v-on:enter = "enter"
        v-on:leave = "leave">
        <div v-if="visible" class="transition-example"></div>
    </transition>
  </section>
</template>

仅当过渡元素是组件

1 个答案: