I. thinking
1. Add 5 elements under the body and locate them absolutely, and display:none;(5 elements are to prevent users from clicking continuously)
2. Locate the dom of the first dispaly:none; in a single location on the single page
3. Use css3 to move the located dom to the target, remove the style, and set display:none;
Two. Realization
html
<body>
<p>Click anywhere on the page, and a small ball will fly into a circular container of class d-starter, which can be clicked continuously</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;
}
/* Get the coordinates of the termination point relative to the window */
function getEndCoordinate (ele) {
var left = ele.offsetLeft;
var top = ele.offsetTop;
return [left,top];
}
/* Get the first element whose myshow attribute is hide under outer */
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';
// Add little ball element
var outerWrapper = addElements(CLASSNAME_OUTER,CLASSNAME_INNER);
var endLeft = getEndCoordinate(document.getElementById('ttt'))[0];
var endTop = getEndCoordinate(document.getElementById('ttt'))[1];
// The real shopping cart implementation is that the click event here is tied to the button adding the shopping cart or the dom similar to the button
window.addEventListener('click', function (event) {
// When double clicking, the ball will fall into the target area from the position of (0,0). The following is that when double clicking, the setTimeout that will only be clicked for the first time will be cleared
// So only one movement from the click location to the target area will be displayed
// But the first logic will still be executed, because the internal two settimeouts have not been cleared
clearTimeout(timer);
var timer = setTimeout(function () {
var left = event.offsetX;
var top = event.offsetY;
// Set piece element
var childElement = getElementMyShowHide(outerWrapper,'point-pre');
childElement.style.left = left + 'px';
childElement.style.top = top + 'px';
// Calculate coordinate difference
var leftDifference = -(left - endLeft);
var topDifference = -(top - endTop);
// start
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);
});
}3, About animation
<div class="outer">
<div class="inner"></div>
</div>To realize the curve movement, we use the dom structure above,
When moving, let the outer move horizontally (tanslateX(n)) and the inner move vertically (translateY(n))
Of course, there's no curve motion
The outer will move along the x-axis, and the inner will move in the desired curve. At this time, the outer does not need to be seen, and you can set no background or background transparency