vue ＜transition＞ css过渡案例

<template>
  <div class="page">
    <button @click="show=!show">
      toggle
    </button>

    <transition name="slide-fade">
      <p class="box" v-if="show"><span>hello</span></p>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        show: true
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .box {
    margin: 50px;
    width: 100px;
    height: 100px;
    background-color: #eee;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateZ(45deg);
  }
  .box span {
    transform: rotateZ(-45deg);
  }

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition-property: transform, opacity;
    transition-duration: 0.8s, 0.8s;
    transition-timing-function: ease;
    /* ease 慢速开始，变快，慢速结束 */
    /*transition: all .3s ease;*/
  }
  .slide-fade-leave-active {
    transition-property: transform, opacity;
    transition-duration: 0.8s, 0.8s;
    transition-timing-function: ease-in-out;
    /* ease-in-out 以慢速开始和结束 */
    /*transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
  }
  .slide-fade-enter, .slide-fade-leave-to {
    transform: rotateZ(360deg) scale(0.3);
    opacity: 0;
  }

</style>