transition小案例

例子

<ul>
       <li>
             <p>精选大棚正宗太空椒1.5kg</p>
             <span>商城价：<a href="#">15.00元</a></span>
             <div class="up">加入购物车</div>
        </li>
</ul>

实现代码

*{padding: 0;margin: 0;}
li{
   position:relative;
   overflow: hidden;
   width: 300px;
}
 .up{
   position: absolute;
   width:100%;
   line-height: 40px;
   height:0;
   bottom:0px;
   color:white;
   opacity: 0.8;
   transition: all 0.5s;
}

li:hover .up{
   height: 40px;
   background-color: #92DF36;
   width:100%;
  transform: translate(0,0);
 
}