Vue.js namens Javascript Hooks

Question

Ich versuche Vue.js mit velocity.js zu verbinden. Die Anleitung gibt ein Beispiel, verwendet jedoch keinen benannten Übergang. Derzeit ist mein Übergang sieht wie folgt aus:

<transition name="collapse"> 

https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

Das Beispiel aus der Dokumentation Vue.js gegeben stellt ein Übergangselement wie so hoch:

<transition 
    v-on:before-enter="beforeEnter" 
    v-on:enter="enter" 
    v-on:after-enter="afterEnter" 
    v-on:enter-cancelled="enterCancelled" 
    v-on:before-leave="beforeLeave" 
    v-on:leave="leave" 
    v-on:after-leave="afterLeave" 
    v-on:leave-cancelled="leaveCancelled" 
> 

Gibt es keine Möglichkeit, zu tun dies automatisch, ohne all dies vorher einstellen zu müssen? Der zweite Schritt wäre natürlich einfach eine benannte Animation, ohne all dies einstellen zu müssen.

Vorzugsweise sind die Methoden in meiner Vue.js Komponente wäre so etwas wie dies mag:

collapseEnter, collapseEnterCancelled, etc. 

Aber das scheint nicht zu funktionieren. Muss ich wirklich alle Richtlinien aufstellen oder gibt es einen einfacheren Weg?

Answer 1

Sie müssen. Es ist jedoch möglich, diese Hook-Funktionen automatisch zu binden, indem Sie eine abstrakte Komponente erstellen, die die <transition> umschließt.

Dies ist hacky aber sollte funktionieren.

Zuerst registrieren wir eine Komponente autoTransition genannt:

Vue.component('autoTransition', { 
    props: ['name', 'vm'], 
    functional: true, 
    abstract: true, 
    render (h, ctx) { 
    return h('transition', { 
     name: ctx.props.name, 
     on: { 
     'before-enter': ctx.props.vm.beforeEnter, 
     'enter': ctx.props.vm.enter, 
     // ... other hooks 
     } 
    }, ctx.children) 
    } 
}) 

Und verwenden Sie es wie ein normaler Übergang, sondern alle Haken vorbei, können Sie jetzt einfach passieren die gesamte vm (kann durch $root referenziert werden) und die name, falls Sie benötigen:

<auto-transition name="myTransition" :vm="$root"> 
    <h1 v-show="someBool">hello</h1> 
</auto-transition> 

Answer 2

AFAIK Der Name wird nur verwendet, wenn Sie CSS-Klassen für den Übergang anwenden. Es hat nichts mit JavaScript-Hooks zu tun. Also ja, Sie müssen alle Haken explizit definieren.