知識點
-
flex屬性：父元素設置爲flex佈局，子元素設置flex屬性（flex-grow flex-shrink flex-basis）；
![在這裏插入圖片描述]()
-
transform：2D,3D變換，主要涉及Y軸平移；
-
::before,::after元素的使用，分別作爲當前數字的減一和加一；
-
JavaScript：修改css屬性值，修改標籤屬性值。
效果
Code
html & javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<button onclick="subtract()">-</button>
<span data-before="9" data-after="11" value="10"></span>
<button onclick="add()">+</button>
</div>
<script>
var span = document.getElementsByTagName("span")[0];
var count = 10; //計數初始值
var count_befor = count-1;
var count_after = count+1;
// span.setAttribute("value", count);
// 因爲如果用value屬性作爲span的值，那麼span標籤之間不能有值，
//但是沒有值，就不能佔位文本流，所有用innerText替換。
span.innerText = count;
span.setAttribute("data-before",count_befor);
span.setAttribute("data-after",count_after);
function add(){
span.classList.add("after");
setTimeout(function(){
this.count = this.count + 1;
this.count_befor = this.count-1;
this.count_after = this.count+1;
span.innerText = count;
span.setAttribute("data-before",this.count_befor);
span.setAttribute("data-after",this.count_after);
span.classList.remove("after");
},300); //這裏時間跟動畫時間一樣
}
function subtract(){
span.classList.add("before");
setTimeout(function(){
this.count = this.count - 1;
this.count_befor = this.count-1;
this.count_after = this.count+1;
span.innerText = count;
span.setAttribute("data-before",this.count_befor);
span.setAttribute("data-after",this.count_after);
span.classList.remove("before");
},300); //這裏時間跟動畫時間一樣
}
</script>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
:root {
font-size: 100px;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 5rem;
height: 1rem;
background-color: #000000;
border-radius: 0.2rem;
display: flex;
overflow: hidden;
padding: .4rem 0;
}
.container span {
flex: 0 1 5rem;
color: white;
font-weight: bold;
line-height: 1rem;
text-align: center;
transform: translateY(-1rem);
}
.container span::before {
content: attr(data-before);
display: block;
color: rgba(143, 140, 140, 0.26);
}
.container span::after {
content: attr(data-after);
display: block;
color: rgba(143, 140, 140, 0.26);
}
span.before {
transform: translateY(0rem);
transition: 0.3s ease-in;
}
span.after {
transform: translateY(-2rem);
transition: 0.3s ease-in;
}
.container button {
flex: 0 0 1rem;
border: none;
background: none;
color: white;
font-size: .6rem;
line-height: 1rem;
width: 1rem;
height: 1rem;
text-align: center;
cursor: pointer;
outline: none;/*chrome點擊出現的藍色邊框，去除*/
}