Vue.js transition doesn't apply on page first load

Question

I have a navbar with links that switch between two components.
I've got a fade-in animation for the switching, but it wouldn't run when you first open the page (it runs only when you use the navbar links to switch the components).
Is there any way to overcome this?

P.S. The components are just <h1>Home</h1> and <h1>About</h1>.

HTML:

<div id="app">
  <transition name="view">
      <router-view/>
  </transition>
</div>

JS (Router):

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: { name: 'home-route' }
    },
    {
      path: '/home',
      name: 'home-route',
      component: HomeComponent
    },
    {
      path: '/about',
      name: 'about-route',
      component: AboutComponent
    }
  ]
})

CSS (Animation):

.view-leave-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}

.view-enter-active {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease;
    transition-delay: 0.5s;
}

.view-enter, .view-leave-to {
    opacity: 0;
}

.view-enter-to, .view-leave {
    opacity: 1;
}

Miro Grujin · Accepted Answer · 2020-08-18 07:31:04Z

29

Just add "appear" attribute in the transition wrapper.
And you will need your css classes for the animtaion or transition to.
Example:

<transition name="fade" appear></transition>

edited Aug 18, 2020 at 7:31

answered Aug 17, 2020 at 19:36

Miro Grujin

7267 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

k0pernikus Over a year ago

What do you mean by "And you will need your css classes for the animtaion or transition to."?

Miro Grujin Over a year ago

that means the kind of transition you will show. for example, you want to do opacity transition from 0 to 1. if transition starts, opacity is zero and then, if transition time that you set is over, the opacity is set to 1 automaticly. here the example: opacity .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }

Drew Baker Over a year ago

appear does not work on initial page load (when using SSR).

Cédric Bloem Over a year ago

This worked for me. Can't believe I missed this in the transition documentation. Thanks!

Miro Grujin Over a year ago

@DrewBaker did you use nuxt? Try <client-only></client-only> tag.

|

T. Short · Accepted Answer · 2020-01-07 12:34:11Z

7

View transitions don't automatically work on page load as when the content is loaded they haven't been initialised yet.

You have to find another way to trigger the transition. I can think of a few options.

Hide the component by default with a data prop and then in the mounted life cycle switch it to true. This should trigger the transition.

<div v-if="show"></div>

data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true; // might need this.$nextTick
  }

Use a regular css transition.

Similar to the above approach, give the parent element a class with a style

opacity: 0;
transition: opacity 0.5s ease-in-out;

Then on mount add a class to change the opacity to 1.

answered Jan 7, 2020 at 12:34

T. Short

3,62417 silver badges30 bronze badges

1 Comment

someone_that_needHelp Over a year ago

sir how to add styling when the component mounted?

Collectives™ on Stack Overflow

Vue.js transition doesn't apply on page first load

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related