<style type="text/css">

/* 可以设置不同的进入和离开动画 */

/* 设置持续时间和动画函数 */

.slide-fade-enter-active {

  transition: all .3s ease;

}

.slide-fade-leave-active {

  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);

}

.slide-fade-enter, .slide-fade-leave-active {

  padding-left: 10px;

  opacity: 0;

}

</style>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

​

<div id="example-1">

  <button @click="show = !show">

    Toggle render

  </button>

  <transition name="slide-fade">

    <p v-if="show">hello</p>

  </transition>

</div>

<script type="text/javascript">

new Vue({

  el: '#example-1',

  data: {

    show: true

  }

})

</script>