过渡 & 动画

  • v-enter:定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
  • v-enter-active:定义进入过渡生效时的状态。可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  • v-enter-to: 定义进入过渡的结束状态。
  • v-leave: 定义离开过渡的开始状态。
  • v-leave-active:定义离开过渡生效时的状态。
  • v-leave-to:定义离开过渡的结束状态。
  1. <style>
  2.         .section {
  3.             width: 200px;
  4.             height: 200px;
  5.             background: #00ffff;
  6.         }
  7.         .v-enter {
  8.             width: 0px;
  9.             background: #00ff00;
  10.         }
  11.         .v-enter-active {
  12.             background:#ff0000;
  13.             transition: all 5s linear;
  15.         }
  16.         .v-enter-to {
  17.             background: orange;
  19.         }
  20.         /* 进入状态结束 变成默认颜色 */
  21.         .v-leave {
  22.             background: #00ff00;
  24.         }
  25.         .v-leave-active {
  26.             width: 0;
  27.             background: rgb(238, 88, 200);
  28.             transition: all 5s linear;
  30.         }
  31.         .v-leave-to {
  32.             background: #29013b;
  33.         }
  34.         /* 离开状态结束 是消失 */
  36.     </style>

JS 钩子动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.     ul{
  11.         list-style: none;
  12.         margin: 0;
  13.         padding: 0;
  14.     }
  15.     li {
  16.         display: flex;
  17.         align-items: center;
  18.         margin: 20px;
  19.     }
  20.     li img {
  21.         display: block;
  22.         width: 150px;
  23.         height: 80px;
  24.         margin-right: 20px;
  25.     }
  26.     span {
  27.         position: absolute;
  28.         width: 150px;
  29.         height: 80px;
  30.         /* background: #00ffff; */
  31.         transition: all 2s linear;
  32.     }
  33.     .cart {
  34.         width: 150px;
  35.         height: 50px;
  36.         background: #00ff66;
  37.         position: fixed;
  38.         right: 50px;
  39.         bottom: 50px;
  40.         line-height: 50px;
  41.         text-align: center;
  42.         font-size: 25px;
  43.         color: #ffffff;
  44.     }
  46.     </style>
  47. </head>
  49. <body>
  50.     <div id="app">
  51.         <ul>
  52.             <!-- ref= "listArray" 专门用来获取 dom 元素 -->
  53.             <li v-for = "(item,index) in lists" :key = `${index}_a` ref= "listArray" > 
  54.                 <img :src="item.cover" alt="">
  55.                 <button @click = "addCart(index)">加入购物车</button>
  56.             </li>
  57.         </ul>
  58.         <transition @enter = "enter" @after-enter = "after">
  59.             <span v-if="isShow"></span>
  60.         </transition>
  61.         <div class="cart" ref = "cart">购物车</div>
  62.     </div>
  63. </body>
  65. </html>
  66. <script src="vue.min.js"></script>
  67. <script>
  68.     let vm = new Vue({
  69.         el: '#app',
  70.         data: {
  72.             currentIndex: -1,  // 加入购物车的默认索引
  73.             isShow: false,
  75.             lists: [
  76.                 {
  77.                     id: 1,
  78.                     cover: 'http://www.javascript.cn/203853de0f7a753037.png'
  79.                 },
  80.                 {
  81.                     id: 2,
  82.                     cover: 'http://www.javascript.cn/202711f70eea987000.jpg'
  83.                 },
  84.                 {
  85.                     id: 3,
  86.                     cover: 'http://www.javascript.cn/211735f96b30549920.jpg'
  87.                 }
  88.             ]
  89.         },
  90.         methods: {
  91.             addCart(index) {
  92.                 // console.log('加入购物车',index);
  93.                 this.currentIndex = index
  94.                 this.isShow = true
  95.                 // console.log(this.currentIndex);
  97.             },
  98.             enter(el,done) { // el 表示当前的动画元素 done 表示动画执行完成后的回调函数
  100.                 //  确定点击元素 li 的位置 ref= "listArray" 专门用来获取 dom 元素
  101.                 // console.log(this.$refs.listArray,111);
  102.                 let oLi = this.$refs.listArray[this.currentIndex];
  103.                 // console.log(oLi,222);
  104.                 let { x, y } = oLi.getBoundingClientRect();//
  105.                 //  设置 span 动画元素的位置 与点击元素 li 位置一样
  106.                 // console.log(x,y);
  107.                 el.style.left = x + 'px';
  108.                 el.style.top = y + 'px';
  109.                 el.style.background = `url(${this.lists[this.currentIndex].cover})`;
  110.                 el.style.backgroundSize = '100% 100%'
  111.                 //  求出购物车的位置
  112.                 let Cart = this.$refs.cart
  113.                 let {x:a,y:b} = Cart.getBoundingClientRect()// x, y 重新命名 a,b
  114.                 //  动画元素到购物车移动的距离
  115.                 el.style.transform = `translate3d(${a - x}px,${b - y}px,0) scale(0)`;
  117.                 el.addEventListener('transitionend', done, false);
  119.             },
  120.             after() {
  121.                 this.isShow = false;
  122.             }
  124.         }
  125.     })
  126. </script>