Search code examples
vue.jsvue-component

Is it possible in Vue to programatically wrap an element or component with a transition using a custom directive or render function?


To make code more simple/clean for me and my designers, I'd like to be able to do something like below. Is it possible - using a custom directive or render function to implement this with a simple attribute?

This would really help separating animation from structure and functionality, which I think could be helpful in many cases. I figure render functions can easily wrap an element with other HTML elements, but can they wrap elements (or components) with custom Vue transitions?

This:

<template>
        <my-component custom-transition></mycomponent>
</template>

Becomes this:

<template>
    <custom-transition>
        <my-component></mycomponent>
    </custom-transition>
</template>

Or maybe bring it up on Github?

Thanks!


Solution

  • My current solution for this is actually using custom directives. It doesn't make use of Vue transitions, but manipulates the DOM el.style properties from within the mounted hook.

    https://vuejs.org/guide/reusability/custom-directives