CSS3——小米商城主页通过控制高度达到过度动画

CSS3——小米商城主页通过控制高度达到过度动画

首先确定大致结构，购物车中下拉的元素cart-list和购物车a元素互为兄弟元素

<ul class="header-right">
                <li><a href="">登录 <span>|</span></a></li>
                <li><a href="">注册 <span>|</span></a></li>
                <li><a href="">消息通知</a></li>
                <li class="cart">
                    <a href=""><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> 购物车(0)</a>
                    <div class="cart-list">
                        购物车中还没有商品，赶紧选购吧！
                    </div>
                </li>
            </ul>

下面是css代码

/* 购物车 */
.cart{
    position: relative;
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    cursor: pointer;
    transition: all .2s;
}
/* 购物车图标 */
.cart i{
    margin-right: 4px;
}
.cart:hover{
    background-color: #fff;
}
.cart:hover a{
    color: #ff6700;
}
/* 购物车的下拉列表 */
.cart-list{
    z-index: 850;
    position: absolute;
    top: 40px;
    /* 默认是左对齐，现在修改为右对齐 */
    right: 0;
    width: 316px;
    height: 0px;
    color: #424242;
    background-color: #fff;
    box-shadow: 0.2px 2px 10px rgba(0,0,0, .15);
    transition: all .3s;
    /* 溢出的文字隐藏掉 */
    overflow: hidden;
}
.cart:hover>.cart-list{
    height: 100px;
    line-height: 100px;
}

该代码原理，通过设置cart-list的高度为0.从而达到将整个标签隐藏的效果

需注意的是要设置溢出的元素处理方法

/* 溢出的文字隐藏掉 */
    overflow: hidden;

紧接着可以设置过度动画

transition: all .3s;

再设置hover效果

.cart:hover>.cart-list{
    height: 100px;
    line-height: 100px;
}

这种相较于使用display:none;要能使用动画，过度，显示效果更好

下面来看看成品演示

QQ录屏20220704173218

同理，同样适用的还有小米商城顶部导航栏的下载APP的按钮

QQ录屏20220704173053

<li>
                    <a href="">下载app</a><span>|</span>
                    <div class="download">
                        <a href="#">
                            <img src="./images/download.png" alt="" width="90" height="90">
                            <p>小米商城app</p>
                        </a>
                    </div>
                    <div class="triangle"></div>
                </li>

.download{
    z-index: 900;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -62px;
    width: 124px;
    height: 0px;
    background-color: #fff;
    box-shadow: 0 1px 5px #ccc;
    overflow: hidden;
    transition: all .3s;
    /* line-height: 148px; */
}
/* 二维码 */
.download img{
    width: 90px;
    margin: 18px 0 12px;
}
.download p{
    color: #333;
    font-size: 14px;
    line-height: 14px;
}
.header-left>li:hover>.download{
    height: 148px;
}