1.

<template>
  <div class="animal">
    <div>
      <!-- demo1 -->
      <button @click="flag = !flag">toggle</button>
      <!-- 1. transition 是vue自带的组件 -->
      <transition>
        <h3 v-show="flag">我是一个H3</h3>
      </transition>
      <hr>
      <!-- demo2 -->
      <!-- 2.修改 v-前缀 -->
      <button @click="flag2 = !flag2">toggle2</button>
      <transition name="my">
        <h4 v-show="flag2">我是一个H4</h4>
      </transition>
      <hr>
      <!-- demo3  半场动画   钩子-->
      <input type="button" value="快到碗里来" @click="flag3 = !flag3">
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div class="ball"></div>
      </transition>

    </div>
  </div>
</template>

<script>
export default {
  name: 'animal',
  props: {
    msg: String
  },
  data () {
    return {
      flag: false,
      flag2: false,
      flag3: false
    }
  },
  methods: {
    // 动画入场生命周期 第一个参数 el 是DOM节点
    // 1.其实样式
    beforeEnter (el) {
      // 开始位置
      el.style.transform = 'translate(0,0)'
    },
    enter (el) {
      el.offsetWidth
      // 结束的位置
      el.style.transform = 'translate(150px,450px)'
      // 这里要设置 从开始 ---  结束     样式  (过度时间 过度样式)
      el.style.transition = 'all 1s ease'

      // done()
    },
    afterEnter (el) {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
// 进入 和离开时候是一个状态
.v-enter, .v-leave-to
  opacity 0
  transform translateX(180px)
// 过程中动画
.v-enter-active, .v-leave-active
  transition all 0.5s
// -----------------------------------------demo2
// 进入 和离开时候是一个状态
.my-enter, .my-leave-to
  opacity 0
  transform translateY(180px)
// 过程中动画
.my-enter-active, .my-leave-active
  transition all 0.5s
// -----------------------------------------demo3
.ball
  width 15px
  height 15px
  border-radius 50%
  background-color red
</style>

2. 列表动画

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>动画组</title>
   <script src="./js/vue.js"></script>
   <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
   <style>
      * {
         margin: 0;
         padding: 0;
      }
      
      body {
         padding: 20px;
      }
      
      li {
         list-style: none;
         border: 1px dashed #cccccc;
         padding: 10px;
      }
      
      li:hover {
         background-color: hotpink;
         transition: all 1s ease;
      }
      /* 开始 */
      
      .v-enter,
      .v-leave-to {
         opacity: 0;
         transform: translateY(130px);
      }
      /* 过程 */
      
      .v-enter-active,
      .v-leave-active {
         transition: all 1s ease;
      }
      
      .v-move {
         transition: all 1s ease;
      }
      
      .v-leave-active {
         position: absolute;
      }
   </style>
</head>

<body>
   <div id="app">
      <div>
         <label for="">
        ID
        <input type="text" v-model='id'>
      </label>
         <label for="">
        name
        <input type="text" v-model='name'>
      </label>
         <input type="button" value="添加" @click='add'>
      </div>
      <div>
         <ul>
            <!-- appear 页面刚展示出来的时候的动画 -->
            <transition-group appear>
               <li v-for='(item,index) in list' :key='index' @click='del(index)'>
                  {{item.id}}-----{{item.name}}
               </li>
            </transition-group>
         </ul>
      </div>
   </div>

   <script>
      var vm = new Vue({
         el: '#app',
         data: {
            id: '',
            name: '',
            list: [{
               id: '1',
               name: '刘德华'
            }, {
               id: '2',
               name: '张学友'
            }, {
               id: '3',
               name: '张学友2'
            }, {
               id: '4',
               name: '张学友3'
            }]
         },
         methods: {
            add() {
               this.list.push({
                  id: this.id,
                  name: this.name
               })
               this.id = this.name = ''
            },
            del(index) {
               this.list.splice(index, 1)
            }
         }
      });
   </script>
</body>

</html>

vue 简单动画

1.

2. 列表动画