[Vuejs]-Make div follow slide transition in vue

0👍

Fixed this by using CSS and letting Vue controlling the transitions.

In the HTML I have

<div class="slider" :class="toggle ? 'slided' : ''">

And then in the CSS I have:

.slider {
  width: 0px;
  overflow: hidden;
  transition: width 900ms ease;
  -moz-transition: width 900ms ease;
  -ms-transition: width 900ms ease;
  -o-transition: width 900ms ease;
  -webkit-transition: width 900ms ease;
}

.slided {
  width: 100px;
}

Leave a comment