实例 Vue 在添加 p 标记时和移除 p 标签时都设置动画

<template>

  <h1>Add/Remove <p> Tag</h1>

  <button @click="this.exists = !this.exists">{{btnText}}</button><br>

  <Transition>

    <p v-if="exists">Hello World!</p>

  </Transition>

</template>

​

<script>

export default {

  data() {

    return {

      exists: false

    }

  },

  computed: {

    btnText() {

      if(this.exists) {

        return 'Remove';

      }

      else {

        return 'Add';

      }

    }

  }

}

</script>

​

<style>

  .v-enter-active {

    background-color: lightgreen;

    animation: added 1s;

  }

  .v-leave-active {

    background-color: lightcoral;

    animation: added 1s reverse;

  }

  @keyframes added {

    from {

      opacity: 0;

      translate: -100px 0;

    }

    to {

      opacity: 1;

      translate: 0 0;

    }

  }

  p {

    display: inline-block;

    padding: 10px;

    border: dashed black 1px;

  }

</style>