zoukankan      html  css  js  c++  java
  • Vue实现购物小球抛物线

     1 .shop{
     2      position: fixed;
     3      top: 300px;
     4      left: 40px;
     5  }
     6  .ball{
     7      position: fixed;
     8      left: 32px;
     9      bottom: 22px;
    10      z-index: 200;
    11      transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41); /*贝塞尔曲线*/
    12  }
    13  .inner{
    14       16px;
    15      height: 16px;
    16      border-radius: 50%;
    17      background-color: rgb(0,160,220);
    18      transition: all 0.4s linear;
    19 }
    20 .cart{
    21     position: fixed;
    22     bottom: 22px;
    23     left: 32px;
    24      30px;
    25     height: 30px;
    26     background-color: rgb(0,160,220);
    27     color: rgb(255,255,255);
    28 }
     1 <div id="app">
     2     <ul class="shop">
     3         <li v-for="item in items">
     4             <span>{{item.text}}</span>
     5             <span>{{item.price}}</span>
     6             <button @click="additem">添加</button>
     7         </li>
     8     </ul>
     9     <div class="cart" style="">{{count}}</div>
    10     <div class="ball-container"><!--小球-->
    11         <div v-for="ball in balls">
    12             <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
    13                 <div class="ball" v-show="ball.show">
    14                     <div class="inner inner-hook"></div>
    15                 </div>
    16             </transition>
    17         </div>
    18     </div>
    19 </div>
     1 <script>
     2     new Vue({
     3         el:"#app",
     4         data:{
     5             count: 0,
     6             items:[
     7                 {
     8                    text: "苹果",
     9                     price: 15
    10                 },
    11                 {
    12                     text: "香蕉",
    13                     price: 15
    14                 }
    15             ],
    16             balls: [ //小球 设为3个
    17                 {
    18                     show: false
    19                 },
    20                 {
    21                     show: false
    22                 },
    23                  {
    24                     show: false
    25                 },
    26             ],
    27             dropBalls:[],
    28         },
    29         methods:{
    30             additem(event){
    31             this.drop(event.target);
    32             this.count ++;
    33             },
    34             drop(el){ //抛物
    35                 for(let i=0;i<this.balls.length;i++){
    36                     let ball= this.balls[i];
    37                     if(!ball.show){
    38                         ball.show = true;
    39                         ball.el=el;
    40                         this.dropBalls.push(ball);
    41                         return;
    42                     }
    43                 }
    44             },
    45             beforeDrop(el) {/* 购物车小球动画实现 */
    46                 let count = this.balls.length;
    47                 while (count--) {
    48                     let ball = this.balls[count];
    49                     if (ball.show) {
    50                         let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
    51                         let x = rect.left - 32;
    52                         let y = -(window.innerHeight - rect.top - 22);  //获取y
    53                         el.style.display = '';
    54                         el.style.webkitTransform = 'translateY('+y+'px)';  //translateY
    55                         el.style.transform = 'translateY('+y+'px)';
    56                         let inner = el.getElementsByClassName('inner-hook')[0];
    57                         inner.style.webkitTransform = 'translateX('+x+'px)';
    58                         inner.style.transform = 'translateX('+x+'px)';
    59                     }
    60                 }
    61             },
    62             dropping(el, done) { /*重置小球数量  样式重置*/
    63                 let rf = el.offsetHeight;
    64                 el.style.webkitTransform = 'translate3d(0,0,0)';
    65                 el.style.transform = 'translate3d(0,0,0)';
    66                 let inner = el.getElementsByClassName('inner-hook')[0];
    67                 inner.style.webkitTransform = 'translate3d(0,0,0)';
    68                 inner.style.transform = 'translate3d(0,0,0)';
    69                 el.addEventListener('transitionend', done);
    70             },
    71             afterDrop(el) { /*初始化小球*/
    72                 let ball = this.dropBalls.shift();
    73                 if (ball) {
    74                 ball.show=false;
    75                 el.style.display = 'none';
    76             }
    77         }
    78     }
    79 })
    80 </script>   

    transtion属性可以查看官方文档,具体位置可以通过调试获得。

  • 相关阅读:
    ubuntu安装jdk的两种方法
    LeetCode 606. Construct String from Binary Tree (建立一个二叉树的string)
    LeetCode 617. Merge Two Binary Tree (合并两个二叉树)
    LeetCode 476. Number Complement (数的补数)
    LeetCode 575. Distribute Candies (发糖果)
    LeetCode 461. Hamming Distance (汉明距离)
    LeetCode 405. Convert a Number to Hexadecimal (把一个数转化为16进制)
    LeetCode 594. Longest Harmonious Subsequence (最长的协调子序列)
    LeetCode 371. Sum of Two Integers (两数之和)
    LeetCode 342. Power of Four (4的次方)
  • 原文地址:https://www.cnblogs.com/xueweijie/p/6929142.html
Copyright © 2011-2022 走看看