css实现抽屉动画 div显示隐藏的过渡效果

码世界

已于 2022-09-08 11:08:09 修改

阅读量4.4k

点赞数 1

分类专栏： css3 文章标签： css 前端 html

于 2022-09-08 11:07:39 首次发布

本文链接：https://blog.csdn.net/qq_30607437/article/details/126760037

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用CSS的transition属性创建一个抽屉式的动画效果，当鼠标悬停在图片框上时，隐藏的内容区域会以平滑过渡的方式显现。示例代码包括HTML结构、CSS样式和JavaScript交互，展示了如何通过添加和移除'on'类来控制div的显示和隐藏状态。

摘要由CSDN通过智能技术生成

参考自：css实现抽屉动画 div显示隐藏的过渡效果_Artsman的博客-CSDN博客_css抽屉效果

html 块

<div class="exampleBox">
    <p class="imgBox"></p>
    <p class="hideBox"></p>
</div>

css 块

.exampleBox{
    width: 200px;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.5s;
}
.imgBox{
    width: 200px;
    height: 200px;
    background-color: purple;
}
.hideBox{
    width:100%;
    height: 300px;
    background: darkcyan;
}
.exampleBox.on{
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.5s;
}

JS 部分

$(".imgBox").hover(function() {
     // 鼠标移入时添加on类
     $(this).parent().addClass('on')
        
}, function() {
    // 鼠标移出时移出on类
    $(this).parent().removeClass('on')
});