js购物车抛物线动画插件案例

Wendy=͟͟͞͞ʕ•̫͡•ʔ

于 2020-11-16 14:47:49 发布

阅读量291

点赞数 1

分类专栏： js 前端 vue 文章标签： js vue.js

本文链接：https://blog.csdn.net/qq_44599041/article/details/109720349

版权

vue 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript创建点击事件触发的小球下落效果，并结合CSS3动画实现购物车的视觉反馈。通过`event.target.getBoundingClientRect()`获取位置信息，演示了球体运动与CSS关键帧动画的交互。

摘要由CSDN通过智能技术生成

思路：点击当前位置创建小球，获取点击的位置的top left ,下落到指定类名的位置。

js: theBall.js

// import './theBall.css'

 function newBall(event) {//当前点击的元素
  let div = document.createElement('div');
  div.className = 'ballFather';
  document.body.appendChild(div);
  let sonDiv = document.createElement('div');
  sonDiv.className = 'ballSon';
  div.appendChild(sonDiv);
  let top = event.target.getBoundingClientRect().top;//获得 跳动小球top
  let left = event.target.getBoundingClientRect().left;//获得 left

  div.style.left = left + 'px';
  div.style.top = top + 'px';

  let y = (window.innerHeight - top);// 下落的高度
  // div.style.display ='block';
  div.style.webkitTransform = `translate3d(0,${y}px,0)`;
  div.style.transform = `translate3d(0,${y}px,0)`;

  sonDiv.style.webkitTransform = `translate3d(-${left - 30}px,0,0)`;
  sonDiv.style.transform = `translate3d(-${left - 40}px,0,0)`;
  //保证 小球运动结束后，调用购物车的动画

  setTimeout(() => {
    document.body.removeChild(div);
    document.querySelector('.bottom_car_img').classList.add("animation");
    setTimeout(() => {
      document.querySelector('.bottom_car_img').classList.remove("animation");
    }, 400)
  }, 620)
}

css:theBall.css

.ballFather {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  transition: all 0.6s cubic-bezier(1, -0.5, 1, 1);
}

.ballSon {
  width: 0.3rem;
  height: 0.3rem;
  background: red;
  border-radius: 50%;
  transition: all 0.6s linear;
}

@keyframes ani {
  0% {
    transform: scale(0.5)
  }
  20% {
    transform: scale(1.2)
  }
  40% {
    transform: scale(.8)
  }
  80% {
    transform: scale(1.1)
  }
  100% {
    transform: scale(1)
  }
}

.animation {
  animation: ani .4s linear;
}

html:调用newBall()

<link rel="stylesheet" href="./js/theball/theBall.css">
<script src="./js/theball/theBall.js"></script>
shangpin(e,index){ //购物车动画效果
	console.log(e)
	newBall(e)
	// setTimeout(function(){
	// 	let div=document.querySelector('.ballFather')
    // document.body.removeChild(div)
	// },2000)
},