html - 动画 Div 到 100% 宽度 css

标签 html css animation

问题

我正在尝试将一个 div 动画化到其子宽度的 100%。我正在为悬停时的最大宽度设置动画,但它会非常突然地将 div 推到它的位置,而不是将它平滑地设置为向右移动。谁能看出为什么动画不正确?如果可能,我宁愿不使用 javascript。

我的尝试

我已经复制了下面的 fiddle :

http://jsfiddle.net/tVHYg/1662/

进入以下来源

.contents {
    white-space:nowrap;
    display:inline-block;
}

.inner {
    background:#c3c;
    width: 100%;
    max-width:50px;
    
    overflow:hidden;
    transition: all .3s ease-in-out;
    padding: 5px 0 5px 0;
}

.contents:hover .inner {
    max-width:100%;
}
    <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>
    
        <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>

最佳答案

百分比是关于您的代码的问题,可能是因为您有 width: 100%; 而同时您有 max-width: 50px;对于内部类。

使用像素可以解决这个问题。任何超过盒子大小的像素都会简单地使其动画更快,例如 max-width: 1000px; 只会加速动画而不会扩大盒子边界

.contents {
    white-space:nowrap;
    display:inline-block;
}

.inner {
    background:#c3c;
    width: 100%;
    max-width:50px;
    
    overflow:hidden;
    transition: all .5s ease-in-out;
    padding: 5px 0 5px 0;
}

.contents:hover .inner {
    max-width:1250px;
}
    <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>
    
        <div class="contents">
        <div class="inner">A bit of text never hurt anyone</div>
    </div>

关于html - 动画 Div 到 100% 宽度 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35421043/

相关文章:

javascript - Redactor.js jQuery UI 对话框焦点问题

css - 无法让 Bootstrap 列按照我想要的方式工作

javascript - 如何让按钮停留在屏幕底部?

css - Ionic 4 - 使用 ionic 刷新时, ionic 页脚变得透明

javascript - 添加和删​​除类 javascript 循环

html - 使用纯 CSS 为未知数量的元素设置动画

php - 在 php 中将 .doc 转换为 html - 在 Windows 上调用 Abiword 时出现问题

jquery - 如何使我的悬停标题覆盖整个图像大小?

html - 为什么响应式菜单无法正常工作?

android - ViewFlipper 的插值器