[Vuejs]-Vue Accordion with transition

display:none will remove your content and avoid the animation, you should trick with opacity, overflow:hidden and height, but you ll be forced to do a method for that.

For example (not tested, but inspiring):

in template:

<div class="accordion" @click="switchAccordion" :class="{'is-open': isOpen}">
  <div class="accordion-title">
    <span>{{title}}</span>
    <i class="ic ic-next"></i>
  </div>
  <div class="accordion-body">
    <p></p>
  </div>
</div>

in component (add a method):

  methods: {
    switchAccordion: function (event) {
      let el = event.target
      this.isOpen = !this.isOpen // switch data isOpen
      if(this.isOpen) {
        let childEl1 = el.childNodes[1]
        el.style.height = childEl1.style.height
      } else {
        let childEl2 = el.childNodes[2]
        el.style.height = childE2.style.height // or .clientHeight + "px"
      }  
    }
  }

in style:

.accordion {
  transition: all .3s cubic-bezier(.25,.8,.5,1);
} 

.accordion-body {
  font-size: 1.3rem;
  padding: 0 16px; 
  opacity:0
}

.is-open .accordion-body {
  opacity:0
}

In this case, your transition should work as you want.
The javascript will change the height value and transition transition: all .3s cubic-bezier(.25,.8,.5,1); will do the animation