如何禁用测试的vue.js转换？

Question

我有一个vue.js组件,它使用该<transition>元素为hide/show设置动画.

为了加快测试,我想禁用动画.我怎样才能做到这一点？

* { transition: none !important }建议在这里:https://github.com/vuejs/vue/issues/463但它似乎没有什么区别.

我在这里创造了一个小提琴:https://jsfiddle.net/z11fe07p/2268/

运行"测试"的最后一个输出是"3.显示应该是"无",它是:块".如果我将超时增加到100,或删除<transition>元素,我得到预期的输出"3.显示应该是"无",它是:无"

那么如何禁用动画以便我可以摆脱这些setTimeout调用呢？

编辑:

我尝试删除所有的CSS样式,但仍然有同样的问题.所以问题是通过简单地拥有<transition>元素来触发的.

编辑2:

更新了小提琴,没​​有造型,只是<transition>元素.还包括要求$nextTick()确保这不是它表现奇怪的原因.

将呼叫更改为wait100,wait10而您将看到测试开始失败

https://jsfiddle.net/z11fe07p/2270/

编辑3:

将示例代码放在这里,这样每个人都可以更轻松地玩:)

new Vue({
  el: '#app',
  template: `
    <span>
      <button @click="test()">Run test</button>
      <transition>
        <p v-show="show">Hello, world!</p>
      </transition>
    </span>
  `,
  data() {
    return {
      show: false,
    };
  },
  methods: {
    test() {
      const wait10 = _ => new Promise(resolve => setTimeout(resolve, 10));
      const wait100 = _ => new Promise(resolve => setTimeout(resolve, 100));
      const showParagraph = _ => this.show = true;
      const hideParagraph = _ => this.show = false;
      const p = document.querySelector('p');

      showParagraph();

      this.$nextTick()
        .then(wait10)
        .then(() => {
          const display = getComputedStyle(p).display;
          assertEqual(display, 'block');
        })
        .then(hideParagraph)
        .then(this.$nextTick)
        .then(wait100)
        .then(() => {
          const display = getComputedStyle(p).display;
          assertEqual(display, 'none');
        });
    }
  }
});

function assertEqual(a, b) { 
  if (a !== b) {
    console.error('Expected "' + a + '" to equal "' + b + '"');
  }
};

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app"></div>

Answer 1

当env是时，我基本上将所有我transition和transition-groups都使用渲染函数更改为div testing。

if (process.env.NODE_ENV === 'testing') {
  const div = {
    functional: true,
    render: (h, { data, children }) => h('div', data, children),
  }

  Vue.component('transition', div)
  Vue.component('transition-group', div)
}

Answer 2

您可以在 Vue 上设置一个变量来指示测试，并设置转换钩子以在测试时中止。

对于我的示例，您可以使用复选框控制测试变量的值。第一个测试结果表示发生任何事情之前的状态，因此它与上一次运行的第三个测试结果相同。除此之外，您每次都可以打开测试开关并获得预期的结果。

我修改了代码，将 fadeTransition 隔离为带有插槽的单独组件，但我还没有找到一种方法来消除模板中添加的标记。

new Vue({
  el: '#app',
  template: `
    <span>
      <input type="checkbox" v-model="Vue.testing"> Testing<br>
      <button @click="test()">Run test</button>
      <fade-transition>
        <p id="transition" v-show="show">Hello, world!</p>
      </fade-transition>
    </span>
  `,
  components: {
    fadeTransition: {
      template: `
      <transition name="fade"
        @enter="killTransition"
        @leave="killTransition"
      ><slot></slot>
      </transition>
      `,
      methods: {
        killTransition(el, done) {
          if (Vue.testing) done();
        }
      }
    }
  },
  data() {
    return {
      show: false,
      testing: true
    };
  },
  methods: {
    test() {
      const p = document.querySelector('#transition');

      let display = getComputedStyle(p).display;
      console.log('1. Display should be "none", it is:', display);

      this.show = true;
      this.$nextTick(() => {
        display = getComputedStyle(p).display;
        console.log('2. Display should be "block", it is:', display);

        this.show = false;

        this.$nextTick(() => {
          display = getComputedStyle(p).display;
          console.log('3. Display should be "none", it is:', display);
        });
      });
    }
  }
});

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app"></div>