Question

我正在尝试使用外观挂钩在渲染函数中创建移动过渡。我以为将转换的初始状态放在beforeAppear钩子中，然后在appear钩子中设置最终状态将导致一个元素足以发生转换。

但是，似乎正在发生的事情是，我在beforeAppear中设置的样式要么从不呈现，要么在浏览器知道它应该过渡之前在appear钩中被覆盖。

下面是我要完成的示例。使用Vue.nextTick()并不能满足我的期望。但是，我确实看到使用setTimeout()可以为我提供有效查找的内容，但是我认为这是考虑文档Transition Classes的appear挂钩的内置功能：

v-enter：Enter的开始状态。在插入元素之前添加，在插入元素之后删除一帧。



v-enter-active：用于进入的活动状态。在整个进入阶段应用。在插入元素之前添加，在删除元素时删除   过渡/动画完成。此类可用于定义   进入过渡的持续时间，延迟和缓和曲线。

我知道这些对象是应用于元素的类的对象，但是这些对象不是与钩子以1：1映射吗？

const app = new Vue({
  el: "#app",
  render(h) {

    // Just hooks
    const transitionTestJustHooks = h("transition", {
      props: {
        css: false,
        appear: ""
      },
      on: {
        beforeAppear(el) {
          console.log("before-appear");
          el.style.position = "absolute";
          el.style.transition = "left 2s ease";
          el.style.top = "0em";
          el.style.left = "20px";
        },
        appear(el, done) {
          console.log("appear");
          el.style.left = "200px";
          done();
        }
      }
    }, [h("div", "just-hooks")]);

    // Vue.nextTick()
    const transitionTestNextTick = h("transition", {
      props: {
        css: false,
        appear: ""
      },
      on: {
        beforeAppear(el) {
          console.log("before-appear");
          el.style.position = "absolute";
          el.style.transition = "left 2s ease";
          el.style.top = "1em";
          el.style.left = "20px";
        },
        appear(el, done) {
          console.log("appear");
          Vue.nextTick(() => {
            el.style.left = "200px";
            done();
          });
        }
      }
    }, [h("div", "Vue.nextTick()")]);

    // setTimeout()
    const transitionTestSetTimeout = h("transition", {
      props: {
        css: false,
        appear: ""
      },
      on: {
        beforeAppear(el) {
          console.log("before-appear");
          el.style.position = "absolute";
          el.style.transition = "left 2s ease";
          el.style.top = "2em";
          el.style.left = "20px";
        },
        appear(el, done) {
          console.log("appear");
          setTimeout(() => {
            el.style.left = "200px";
            done();
          });
        }
      }
    }, [h("div", "setTimeout")]);

    return h("div", [
      transitionTestJustHooks,
      transitionTestNextTick,
      transitionTestSetTimeout
    ]);
  }
});

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>

<div id="app"></div>

在渲染功能中使用过渡挂钩时，“ before”挂钩会触发渲染吗？

0 个答案: