Kaleidomo 2021-08-26 17:02 采纳率: 0%
浏览 71

CSS样式中如何在使用transition过渡效果播放之后改变元素高度?

Question：想实现鼠标移入移出，在过渡动画播放结束之后，改变box1的高度，是否可以只用CSS实现这个效果，望指教。


 .box1{
    height: 50px;
    width: 100px;
    margin: auto;
    position: absolute;
    left: 500px;
    top: 500px;
    background-color: gray;
    transform: scale(1, 1);
    transition: transform 2s;
}

.box1:hover{
    transform: scale(2, 2);
    transition: transform 3s;
}


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <div class="box1">
        </div>
    </body>
</html>
  • 写回答

3条回答 默认 最新

  • CSDN专家-天际的海浪 2021-08-26 17:36
    关注

    transition: 中再加上一个 height 的过度，让height 过度的延迟时间等于 transition 的持续时间即可

    .box1{
    height: 50px;
    width: 100px;
    margin: auto;
    position: absolute;
    left: 500px;
    top: 500px;
    background-color: gray;
    transform: scale(1, 1);
    transition: transform 2s 1s, height 1s;
}
.box1:hover{
    transform: scale(2, 2);
    height: 100px;
    transition: transform 3s, height 1s 3s;
}
    评论

报告相同问题？

问题事件

  • 创建了问题 8月26日

悬赏问题

  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？
  • ¥15 乘性高斯噪声在深度学习网络中的应用