Vue ＜transition＞多个元素过渡 css过渡使用案例

<!-- Vue <transition>多个元素过渡 css过渡使用案例 -->

<template>
  <div class="page">
    <transition name="tra">
      <!--
      当有相同标签的元素切换时，需要通过key属性设置唯一的值来标记它们，以此让Vue能过区分它们，
      否则Vue为了效率只会替换相同标签内部的内容
      -->
      <button class="btn" :key="isEditing" @click="isEditing = !isEditing">
        {{isEditing? 'Edit' : 'Save'}}
      </button>
    </transition>
  </div>
</template>

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

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .btn {
    position: absolute;
    left: 200px; top: 200px;
  }

  /*
  使用css过渡是<transition>过渡中最常用的过渡
  enter
    v-enter
    v-enter-active
    v-enter-to
  leave
    v-leave
    v-leave-active
    v-leave-to
  其中，v代表<transition>name属性的值
  */
  .tra-enter, .tra-leave-to {
    opacity: 0;
    transform: scale(3);
  }
  .tra-enter-active, .tra-leave-active {
    transition: all 1s;
  }
</style>