How to use transition with vue-js-popover?

[DenniLa2]

In my example transitions don`t work =(
codesandbox
Where can i mistake or what can I write to work my example? Thanks!

[egillespie]

@DenniLa2, it looks like there aren't any styles to perform the fade transition. If you add the following block to the end of your MyTooltip.vue file, you should see a transition:

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.7s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Updated sandbox example.

[demiavaliani]

For future readers, in your template you should add a single class to transition prop, like this:

<popover
	name="my-tooltip"
	transition="my-tooltip"
	:event="'hover'"
	:pointer="false"
	>
</popover>

Later, prepend that same class to Vue transition classes to apply the animation. So, for example, a tooltip element that fades in on hover with 0.2 second transition-duration will look like this:

// "enter" state (start state of an element)
.my-tooltip-enter {
	opacity: 0;
}

// "enter-to" state (end state of an element)
.my-tooltip-enter-to {
	opacity: 1;
}

// "enter-active" state (duration of the animation. add your transition here)
.my-tooltip-enter-active {
	transition: opacity 0.2s ease-out 0s;
}

[darrenklein]

Thank you, that was not at all clear from the documentation.