Question

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

为了加快测试，我想禁用动画。我怎么能这样做？

这里建议

* { transition: none !important }：https://github.com/vuejs/vue/issues/463但它似乎没有什么区别。

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

运行＆＃34;测试＆＃34;最后的输出是＆＃34; 3。显示应该是＆＃34; none＆＃34;，它是：block＆＃34;。如果我将超时增加到100，或删除<transition>元素，我得到＆＃34; 3的预期输出。显示应该是＆＃34;无＆＃34;，它是：无＆＃34;

那么如何禁用动画以便我可以摆脱setTimeout来电？

修改

我尝试删除所有CSS样式，但仍然有同样的问题。因此，只需拥有<transition>元素即可触发问题。

编辑2：

更新了小提琴，没有样式，只有<transition>元素。还包括对$nextTick()的调用，以确保其原因并不奇怪。

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

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

编辑3：

将示例代码放在此处，以便每个人都可以更轻松地使用：）

＆＃13;

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 + '"');
  }
};

＆＃13;

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

＆＃13;

Answer 1

当env为transition时，我基本上将所有transition-group和testing更改为带渲染函数的div。

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

我使用other = b遇到了这个问题。我的解决方案是在测试期间使用以下代码替换它。

<transition-group>

这是将Vue.component('transition-group', { props: ['tag'], render(createElement) { return createElement(this.tag || this.$vnode.data.tag || 'span', this.$slots.default); }, });转换为具有可选动态定义标记的<transition-group>镜像的最低要求。

我可能需要对<slot>做同样的事情。如果是这样，它可能更简单，因为<transition>没有标记道具。

Answer 3

您可以在Vue上设置变量以指示测试，并在测试时将transition hooks设置为中止。

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

我修改了我的代码，将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>

Answer 4

我的用例略有不同，但要求相同：我想为手机屏幕禁用某些过渡效果。

我的解决方案是将其包装成一个组件。这也适用于测试（如果已使用例如process.env.NODE_ENV ==='testing'设置了“禁用”）。

<template>
  <transition v-if="!disable" :name="name" :mode="mode">
    <slot></slot>
  </transition>
  <div v-else>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    disable: Boolean,
    name: String,
    mode: String,
  },
};
</script>

纯粹是为了测试，我认为Bill Criswell的答案可能是最干净的。

Answer 5

可能不是最简单的测试方法，但对于其他方案，可以考虑使用v-bind来绑定没有与之关联的CSS转换的转换名称。

V-绑定：名称= “我的-VAR”

this.myVar =“无”

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

5 个答案: