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

Question

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

m_callens · Accepted Answer · 2016-07-18 13:12:21Z

2

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>

answered Jul 18, 2016 at 13:12

m_callens

6,4029 gold badges35 silver badges59 bronze badges

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

Comments

adelindev · Accepted Answer · 2016-07-18 13:22:40Z

0

Change v-transition to just transition.

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

answered Jul 18, 2016 at 13:22

adelindev

6285 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related