一.思路
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;
}
.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就不需要被看到,可以設置無背景或者背景透明