Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Components transition `enter` function not called when using Vue version 2.6.10

See original GitHub issue

Version

2.6.10

Reproduction link

https://github.com/katerlouis/vue-2610-bug

Steps to reproduce

serve or build the app and press the toggle button

What is expected?

HelloWorld component should call enter function

What is actually happening?

HelloWorld component doesn’t call enter function

enter of the transition directly inside App.vue (the logo img) gets called though, which is odd. With vue v2.5.17 it works as expected (haven’t used any other vue version since)

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:10 (4 by maintainers)

Top GitHub Comments

8reactions

posvacommented, Jul 4, 2019

the transition inside HelloWorld needs the prop appear to play at the same time as the parent appears:

  <transition :css="false" @enter="enter" @leave="leave" appear>
    <div class="hello">

For the leave transition it’s currently not possible, you can track the feature at https://github.com/vuejs/vue/issues/9328

I hope this helps 😃

8reactions

posvacommented, Jul 3, 2019

You need to use the appear prop for the animation to play initially

Top Results From Across the Web

Why is transition inside an element with v-if not entering the ...

In your example, transition does not exists if v-if is setup on/above transition element. If you move v-if below transition, then it will...

Transition | Vue.js

<Transition> is a built-in component: this means it is available in any component's template without having to register it. It can be used...

Getting Started with Vue Component (Tutorial & Live Examples)

In this post, we explore Vue components through useful examples and ... With the latest version of our shopping cart built on top...

The Power of Named Transitions in Vue - CSS-Tricks

Almost all of this functionality is based around a single component: the transition component. A simple example of this is with a single ......

Changelog | Reference - BootstrapVue

vue3: do not rely on __vueParentComponent in tooltip (fe13503) ... v-b-modal: open modal using ENTER key on non-button elements for A11Y (#4364) (0d27d7b) ......