vue动画和过渡

动画：

// 进入和离开动画（从左边进入）
<template>
  <div>
    <button @click="handleClick">点击显示与隐藏动画（过渡）</button>
    <transition name="trans" appear>
        <h1 v-show="isShow">动画</h1>
    </transition>
  </div>
</template>

<script>
    export default {
        name: 'SchoolName',
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow
            }
        }
    }
</script>

<style>
  h1 {
    background: red;
    
  }

  .trans-enter-active {
    /* 加动画 */
    animation: animate 1s;
  }

  .trans-leave-active {
    /* 加动画 */
    animation: animate 1s reverse;
  }

  /* 动画效果封装好 */
  @keyframes animate {
    from {
        /* 从哪里来 */
        transform: translateX(-100%);
    } to {
        /* 到哪里去 */
        transform: translateX(0);
    }
  }
</style>

过渡：

// 进入和离开过渡（从左边进入）
<template>
  <div>
    <button @click="handleClick">点击显示与隐藏动画（过渡）</button>
    <transition-group name="trans" appear>
        <h1 v-show="isShow" key="1">动画1</h1>
        <h1 v-show="isShow" key="2">动画1</h1>
    </transition-group>
  </div>
</template>

<script>
    export default {
        name: 'SchoolName',
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow
            }
        }
    }
</script>

<style>
  h1 {
    background: red;
  }

  .trans-enter, .trans-leave-to {
    transform: translateX(-100%);
  }

  .trans-enter-active, .trans-leave-active {
    /* transition过渡 */
    transition: 1s linear;
  }

  .trans-enter-to, .trans-leave {
    transform: translateX(0);
  }
</style>