question-mark
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.

Transition.enter not running on initial page load

See original GitHub issue

Firstly, thank you for the great framework. I love how it is so easy to use and the documentation is excellent.

I have run in an issue where I would like a bootstrap modal to open upon session login/logout which is being shown/hidden by Vue.transition.enter/leave functions.

Upon initial page load the user session is undefined so the modal should be shown (this is not currently the case). However if I trigger the modal manually from the console $('#loginView').modal('show'); and then click login/logout, the transitions work as expected.

I believe the transition.enter function is not running on initial render.

To demonstrate this issue, I have created a jsbin. Just run $('#loginView').modal('show'); in the console.

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
fnlctrlcommented, Sep 12, 2016

@PierBover It’s in 2.0 as <transition>'s appear prop https://github.com/vuejs/vue/issues/2873 > Transition API Change

1reaction
yyx990803commented, Apr 6, 2015

Yeah, a flag attribute would probably help. Something like transition-on-init?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue.js transition doesn't apply on page first load - Stack Overflow
View transitions don't automatically work on page load as when the content is loaded they haven't been initialised yet.
Read more >
Transition not run on page load - Get Help - Vue Forum
Hey guys, I implemented several complex transitions with router-view, and I'm stuch with what I thought was very simple.
Read more >
Transition not firing for initial page load of route #452 - GitHub
I'm running version 2.0 I have a setup similar to var routes = [ { name: 'index', path: '/' } ]; barba.use(barbaRouter, {...
Read more >
Animation transitions and triggers - Angular
The :enter transition runs when any *ngIf or *ngFor views are placed on the page, and :leave runs when those views are removed...
Read more >
Page to Page loading transitions with Next.js - YouTube
GitHub : https://github.com/perkinsjr/ page -to- page -loaderJoin this channel to get access to ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found