styke styke - 4 months ago 81
CSS Question

Can't get Vue.js CSS transition to work?

Documentation for CSS transitions can be found here.

Pretty sure I set up my JSFiddle exactly how it needs to be set up for the transition to work. Not entirely certain because imo the documentation is a little light on CSS transitions.

Have some very basic HTML/CSS I was hoping would enable Vue.js to create a nice fade effect:

CSS:

.fade-transition {
opacity: 1;
transition: all .45s linear;
}

.fade-enter, .fade-leave {
opacity: 0;
}


HTML:

<div class="loading-overlay" v-if="loading" v-transition="fade">
In 5 seconds, this overlay should fade out...
</div>


However, it doesn't seem to be working. Any advice?

JSFiddle

Answer

For the transition attribute in your div tag, simply remove the v- from before the transition and it'll work.

<div class="loading-overlay" v-if="loading" transition="fade">
  In 5 seconds, this overlay should fade out...
</div>