<template>
  <div align="center" style="margin-top: 100px;">
    <button @click="show= !show" >測試</button>
    <transition>
      <div v-if="show">
        <p>這是一段文字</p>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'transitionTest',
  data () {
    return {
      show: true
    }
  }
}
</script>
<style scoped>
    .v-enter-active, .v-leave-active {
    transition: all .5s ;
    }
    .v-enter {
    transform: translateY(50px);
    opacity: 0;
    }
    .v-leave-active {
    transform: translateY(50px);
    opacity: .5;
    }
</style>

    <transition name="my-trans" mode="out-in">
       <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>

<style>
  .my-trans-enter-active,
  .my-trans-leave-active {
    transition: all .2s;
    opacity: 1;
  }
  .my-trans-enter {
    transition: all .2s;
    opacity: 0;
  }
  .my-trans-leave-to {
    transition: all .2s;
    opacity: 0;
  }  
</style>

<template>
  <div class="main_css">
    <transition-group name="slide">
      <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
        {{ item.id }} --- {{ item.name }}
      </li>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: 'transitionGroupTest',
  data () {
    return {
      list: [{
        id: 1,
        name: '紅燒魚'
      },
      {
        id: 2,
        name: '炒土豆'
      },
      {
        id: 3,
        name: '燒茄子'
      }
      ]
    }
  },
  methods: {
    del (i) {
      this.list.splice(i, 1)
    }
  }
}
</script>
<style scoped>
  .main_css {
    margin-left: 50px;
    margin-top: 50px;
  }
  .slide-enter-active {
    transition: all .5s linear;
  }
  .slide-leave-active {
    transition: all .1s linear;
  }
  .slide-enter {
    transform: translateX(-100%);
    opacity: 0;
  }
  .slide-leave-to {
    transform: translateX(110%);
    opacity: 0;
  }
</style>