改变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往上变化、往下变化，向右变化也是类似的思路（以后会更新）