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.
First enter doesn't trigger transition
See original GitHub issueVue.js version
2.0.0-rc.4
Reproduction Link
https://jsfiddle.net/uur9e91L/1/
Steps to reproduce
Click the toggle button
What is Expected?
On first click, the content fades in.
What is actually happening?
On first click, the content doesn’t fade in. It only fades in/out on the following clicks.
This only happens when the content is controlled by both v-if and v-show. But in Vue 1.x, it works fine as shown in this demo
Issue Analytics
- State:
- Created 7 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
CSS Transition is not being triggered as expected [duplicate]
I set the transition class to not make any changes that would start up a transition (it only includes the transition property).
Read more >Entry state always uses default transition and ignores other ...
Problem is that the Entry state always transitions to the default state---even if other transitions have triggers that evaluate to true.
Read more >Using CSS transitions - CSS: Cascading Style Sheets | MDN
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect ...
Read more >"appear" doesn't work for "CSSTransition" · Issue #152 - GitHub
Documentation does not make it clear that one has to define "appear" transition alongside (or instead) "enter" transition. I just made and ...
Read more >transition | CSS-Tricks
For the most part, the order of the values does not matter — unless a delay is specified. If you specify a delay,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
You need to use the
appearprop, see https://github.com/vuejs/vue/issues/2873 https://jsfiddle.net/mLafkom3/This is indeed a bug, fixed in commit referenced above.