您的位置：首页 > Web前端 > CSS

css3的animation实现购物车小球飞入效果

2018-04-01 21:07 435 查看

一.思路



1.在body下添加5个元素并绝对定位,且display:none;(5个元素是防止用户连续点击)

2.单机页面的某一处位置,并将第一个dispaly:none;的dom定位到单机位置

3.使用css3将定位后的dom运动到目标,并去除style,设置display:none;

二.实现

html

<body>
<p>在页面的任何位置点击,将有一个小球飞入类为d-targer圆形容器中,可以连续点击</p>
<div id="ttt" class="d-target"></div>
</body>


css

.d-target{
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
left: 100px;
bottom: 100px;
}

.outer{
width: 30px;
height: 30px;
position: absolute;
left: 0px;
top: 0px;
transition: all 0.35s linear;
}
.outer .inner{
width: 30px;
height: 30px;
background: #ccc;
border-radius: 50%;
transition: all 0.35s cubic-bezier(0.39,-0.4,0.83,0.23);
position: absolute;
d9bc
}
.outer.point-pre{
display: none;
}


js

window.onload = function () {
/* add elements */
function addElements(CLASSNAME_OUTER,CLASSNAME_INNER) {
var outerWrapper = document.createElement('div');
var outer = null;
var inner = null;
for (var i = 0; i< 5; i++) {
outer = document.createElement('div');
outer.classList.add(CLASSNAME_OUTER);
outer.classList.add('point-pre');
// outer.setAttribute('class', CLASSNAME_OUTER+" point-pre");
// outer.setAttribute('myshow', 'hide');
inner = document.createElement('div');
inner.setAttribute('class', CLASSNAME_INNER);
outer.appendChild(inner);
outerWrapper.appendChild(outer);
inner = null;
outer = null;
}
document.body.appendChild(outerWrapper);
return outerWrapper;
}

/* 获取终止点的相对于窗口的坐标 */
function getEndCoordinate (ele) {
var left = ele.offsetLeft;
var top  = ele.offsetTop;
return [left,top];
}

/* 获取outer下myshow属性为hide的第一个元素 */
function getElementMyShowHide (parentElement,CLASSNAME_SHOW_NONE) {
var result = null;
var childElements = parentElement.getElementsByClassName(CLASSNAME_SHOW_NONE);
result = childElements[0];

return result;
}

var CLASSNAME_OUTER = 'outer';
var CLASSNAME_INNER = 'inner';
// 增加小球元素
var outerWrapper = addElements(CLASSNAME_OUTER,CLASSNAME_INNER);
var endLeft = getEndCoordinate(document.getElementById('ttt'))[0];
var endTop  = getEndCoordinate(document.getElementById('ttt'))[1];

// 真实中的购物车实现是这里的click事件绑在添加购物车的按钮或者类似按钮的dom上
window.addEventListener('click', function (event) {
// 当双击的时候,小球会从(0,0)的位置落入目标区,以下为当双击的时候,只会第一次点击的setTimeout会被清除
// 所以只会显示一次从点击地点到目标区的运动
// 但是依然会执行第一次的逻辑,因为内部两个setTimeout没有被清除
clearTimeout(timer);
var timer = setTimeout(function () {
var left = event.offsetX;
var top  = event.offsetY;
// 定位球元素
var childElement = getElementMyShowHide(outerWrapper,'point-pre');
childElement.style.left = left + 'px';
childElement.style.top = top + 'px';
// 计算坐标差
var leftDifference = -(left - endLeft);
var topDifference = -(top - endTop);
// 开始
childElement.classList.remove('point-pre');
setTimeout(function () {
childElement.getElementsByClassName('inner')[0].style.transform = `translateY(${topDifference}px)`;
childElement.style.transform = `translateX(${leftDifference}px)`;
setTimeout(function () {
childElement.getElementsByClassName('inner')[0].setAttribute('style', '');
childElement.setAttribute('style', '');
childElement.classList.add('point-pre');
}, 350);
}, 1);
}, 30);
});
}


三.关于动画

<div class="outer">
<div class="inner"></div>
</div>


实现曲线运动是使用如上dom结构,

运动的时候,让outer进行水平运动(tanslateX(n)),让inner进行垂直运动(translateY(n))

当然这不会出现想要的曲线运动

outer会沿着x轴运动,inner会出现想要的曲线运动,这时outer就不需要被看到,可以设置无背景或者背景透明
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航