Jak mogę wyłączyć przejścia vue.js do testów?

Question

Mam element vue.js, który używa elementu <transition> do animowania hide/show.

Aby przyspieszyć testy, chciałbym wyłączyć animację. Jak mogę to zrobić?

* { transition: none !important } zasugerowano tutaj: https://github.com/vuejs/vue/issues/463, ale nie robi się różnicy.

Utworzyłem skrzypce tutaj: https://jsfiddle.net/z11fe07p/2268/

Running "test" ostatnie wyjście jest "3. Wyświetlacz powinien być "none", to jest: block". Jeśli zwiększę limit czasu do 100 lub usunę element <transition>, otrzymam oczekiwane wyjście "3. Wyświetlacz powinien być" none ", to jest: none"

Jak mogę wyłączyć animację, aby móc pozbyć się połączeń setTimeout?

EDIT:

Próbowałem usunięcie wszystkich css stylizacji, ale nadal mają ten sam problem. Problem pojawia się po prostu mając element <transition>.

EDIT 2:

Aktualizacja skrzypce nie stylizacja, tylko element <transition>. Uwzględniono również połączenia z numerem $nextTick(), aby upewnić się, że nie był to powód, dla którego zachowywał się dziwnie.

Zmień wywołanie wait100 do wait10 zamiast a zobaczysz test rozpocznie braku

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

edit 3:

oddanie przykładowy kod tutaj, więc jest to łatwiejsze dla wszystkich, aby baw się z :)

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

Można ustawić zmienną na Vue wskazać testowanie i ustaw transition hooks przerwać jeśli testujesz.

Dla mojego przykładu można kontrolować wartość zmiennej testowej za pomocą pola wyboru. Pierwszy wynik testu wskazuje stan zanim cokolwiek się stanie, więc będzie on taki sam jak trzeci wynik testu z poprzedniego przebiegu. Poza tym możesz przełączyć przełącznik testowy i uzyskać oczekiwane wyniki za każdym razem.

Zrewidowałem swój kod, aby wyizolować fadeTransition jako oddzielny komponent z gniazdem, ale nie znalazłem sposobu na wyeliminowanie dodanego znacznika w szablonie.

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 2

wpadłem na ten problem z <transition-group>. Moim rozwiązaniem było zastąpienie go podczas testów za pomocą następującego kodu.

Vue.component('transition-group', { 
    props: ['tag'], 
    render(createElement) { 
     return createElement(this.tag || this.$vnode.data.tag || 'span', this.$slots.default); 
    }, 
}); 

Jest to niezbędne minimum do toczenia <transition-group> w lustrze <slot> z opcjonalnym dynamicznie określonym tagiem.

Prawdopodobnie będę musiał zrobić to samo z <transition>. Jeśli tak, może być jeszcze prostsze, ponieważ <transition> nie ma podpory tagu.

Answer 3

Zasadniczo zmieniam wszystkie moje transition i transition-group s na div z funkcjami renderowania, gdy env to 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 4

nie

Może najprostszy sposób do testowania, ale dla innych scenariuszy można rozważyć użycie v-wiążą się wiązać nazwę przejściowy, który nie ma przejścia CSS z nim związane.

v-wiążą: name = „my-var”

this.myVar = „Brak”