学习渡一课程 多元素组合动画练习。
在我们开发购物车功能时，经常会有点击添加按钮，就会有一个小圆点掉进购物车的动画，如下图所示，今天我们通过css来实现。
首先实现多元素组合动画
直接上代码，可以复制到本地使用：
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多元素动画</title>
<style>
*{
padding: 0;
margin: 0;
}
.view{
width: 400px;
height: 600px;
position: relative;
border: 1px solid #dedede;
}
.ShoppingCart {
position: absolute;
right: 0;
bottom: 0;
text-align: center;
width: 80px;
height: 40px;
background-color: blueviolet;
color: #ffffff;
}
.add {
position: relative;
width: 20px;
height: 20px;
top:50px;
left: 10px;
background-color: blue;
color: #ffffff;
text-align: center;
line-height: 20px;
cursor: pointer;
border-radius: 50%;
}
.box{
position: absolute;
top: 0;
left: 0;
display: none;
}
.active{
display: block;
animation: move1 0.6s cubic-bezier(0, 0.36, 1, 0.59);
}
.ball{
width: 20px;
height: 20px;
top: 0;
left: 0;
border-radius: 50%;
background-color: blue;
position: absolute;
z-index: -1;
}
.active .ball{
animation: move2 0.6s cubic-bezier(0.35,-0.35, 1, 0.38);
}
@keyframes move1 {
to {
transform: translateX(350px);
}
}
@keyframes move2 {
to {
transform: translateY(510px);
}
}
</style>
</head>
<body>
<div class="view">
<div class="add" id="add">
+
<div class="box">
<div class="ball"></div>
</div>
</div>
<div class="ShoppingCart">
购物车
</div>
</div>
</body>
<script>
let add = document.querySelector(".add")
let box = document.querySelector(".box")
add.addEventListener("click",()=>{
box.className = "box active"
setTimeout(()=>{
box.className = "box"
},2000)
})
</script>
</html>实现多个动画
上代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多种元素动画</title>
<style>
*{
padding: 0;
margin: 0;
}
.view{
width: 400px;
height: 600px;
position: relative;
border: 1px solid #dedede;
}
.ShoppingCart {
position: absolute;
right: 0;
bottom: 0;
text-align: center;
width: 80px;
height: 40px;
background-color: blueviolet;
color: #ffffff;
}
.add {
position: relative;
width: 20px;
height: 20px;
top:50px;
left: 10px;
background-color: blue;
color: #ffffff;
text-align: center;
line-height: 20px;
cursor: pointer;
border-radius: 50%;
}
.box{
position: absolute;
top: 0;
left: 0;
animation: move1 0.6s cubic-bezier(0, 0.36, 1, 0.59);
}
.ball{
width: 20px;
height: 20px;
top: 0;
left: 0;
border-radius: 50%;
background-color: blue;
position: absolute;
z-index: -1;
animation: move2 0.6s cubic-bezier(0.35,-0.35, 1, 0.38);
}
@keyframes move1 {
to {
transform: translateX(350px);
}
}
@keyframes move2 {
to {
transform: translateY(510px);
}
}
</style>
</head>
<body>
<div class="view">
<div class="add" id="add">
+
</div>
<div class="ShoppingCart">
购物车
</div>
</div>
</body>
<script>
let add = document.querySelector(".add")
let box = document.querySelector(".box")
add.addEventListener("click",()=>{
let ele = document.createElement("div")
ele.className = "box"
ele.innerHTML = "<div class='ball'></div>"
add.appendChild(ele)
setTimeout(()=>{
ele.parentNode.removeChild(ele);
},1000)
})
</script>
</html>