改變dom元素的width值，頁面上默認是向右變化（向右伸長以及向左縮短）。
以下爲實現雙向變化和向左變化（向左伸長以及向右縮短）
1、雙向變化（實例）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
text-align: center;
}
.child {
display: inline-block;
width: 80px;
height: 6px;
background-color: #01AAED;
transition: width .5s;
}
.child:hover {
width: 200px;
}
</style>
</head>
<body style="margin: 20px 20px">
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
實現雙向變化的關鍵是給要變化的dom元素，加一個父元素，並設置樣式text-align: center;
此時width由80px伸長爲200px，雖然還是往右伸長，
但由於子元素始終保持居中，所以在視覺上看上去就呈現雙向變化了。
2、向左變化（向左伸長以及向右縮短）
類似於雙向變化，只要讓子元素始終保持右對齊，就可以實現向左變化（向左伸長以及向右縮短）。
.parent {
text-align: right;
}
注：height往上變化、往下變化，向右變化也是類似的思路（以後會更新）