Vue slide

by imys

HTML

<div id="demo">
  <button @click="slide">toggle</button>
  <list :show="show"></list>
</div>

CSS

.list{
  overflow-y: hidden; 
  max-height: 0;
  height: inherit;
  width: inherit;
  transition: .3s ease-in-out;
}
.list.slide {
  max-height: 200px;
}

JavaScript

var List = Vue.extend({
  template: '<ul class="list" :class="{ slide: show }"><li>00000001</li><li>00000002</li><li>00000003</li><li>00000004</li><li>00000005</li></ul>',
  props: {
     show: false
  }
})

Vue.component('list', List)


new Vue({
	el: '#demo',
  data: {
  	show: false
  },
  methods: {
  	slide: function() {
       this.show = !this.show
    }
  }
})