核心代码(CSS):
transition:1s allcubic-bezier(.46,1,.23,1.52);
hoverSlideout Demo.container { text-align: center; }
.bar {
width: 100px;
display: inline-block;
transition: 1s all cubic-bezier(.46, 1, .23, 1.52);
border: 1px solid #e3e3e3;
border-radius: 4px;
background-color: #ef5621;
padding: 10px 20px;
box-sizing: border-box;
}
.bar.active { width: 200px; }
css3 transition 实现div宽度以中心为原点向两边伸长
$('.bar').hover(function(){
$('.bar').toggleClass('active');
});