styke styke - 1 year ago 254
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:


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

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


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

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


Answer Source

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...
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download