css动画width,动画Div为100％宽度css(Animate Div to 100% width css)

动画Div为100％宽度css(Animate Div to 100% width css)

问题

我试图将div的动画设置为其子宽度的100％。 我正在设置悬停时的最大宽度动画，但它会立即将div推向它，而不是将其平滑地向右移动。 任何人都可以看到为什么它没有正确动画？ 如果可能的话，我宁愿不使用javascript。

我的尝试

我复制了下面的小提琴：

进入以下来源

.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%;

}

A bit of text never hurt anyone

A bit of text never hurt anyone

Problem

I am trying to animate a div to 100% of it's child's width. I'm animating the max width on hover, but it is pushing the div to it's right away very abruptly instead of animating it smoothly to the right. Can anybody see why it isn't animating correctly? I would prefer not to use javascript if possible.

My Attempt

I have copied the fiddle below:

into the following source

.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%;

}

A bit of text never hurt anyone

A bit of text never hurt anyone

原文：https://stackoverflow.com/questions/35421043

更新时间：2020-01-03 03:49

最满意答案

百分比是关于您的代码的问题，可能是因为您有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;

}

A bit of text never hurt anyone

A bit of text never hurt anyone

The percent is the issue in regards to your code and probably because you have width: 100%; while at the same time you have max-width: 50px; for the inner class .

Using pixels fixes that. any pixels over the size of the boxes will simply animate it faster e.g max-width: 1000px; will just speed up the animation without enlarging the box boundaries

.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;

}

A bit of text never hurt anyone

A bit of text never hurt anyone

相关问答

神秘overflow: hidden; 是你的朋友 它阻止浮子附近的元素延伸到浮动体后面 - 我认为这是您要查找的布局。 这里有一些稍微编辑的HTML：我不认为你的id可以有#字符：

inner div 1. Some text...

inner div 2...

这里是CSS来实现你想

...

您没有考虑的主要事项之一是具有引导列。 我修改了你给我的示例链接并复制了两列而不是一列。 默认情况下，这是示例中代码的当前骨架或更确切的结构 - 示例站点上的当前实现

something inside ...

Taking away the width on the inner div

...

所有你需要做的是添加padding到你的父容器。 这是更改后的CSS ： #container {

width:100%;

height:250px;

background-color:#0183e5;

padding: 10px;

}

演示 我建议使用box-sizing: border-box; 或calc(100% - 20px) ，不用担心要确定要设置的尺寸。 演示 - box-sizing: border-box; 演示 - calc(100% - 20

...

百分比是关于您的代码的问题，可能是因为您有width: 100%; 同时你有max-width: 50px; 对于内部阶级。 使用像素修复了这一点。 任何超过盒子大小的像素都会简单地为它设置动画，例如max-width: 1000px; 只会加速动画而不会扩大框边界 .contents {

white-space:nowrap;

display:inline-block;

}

.inner {

background:#c3c;

width: 100%

...

干得好： body{

margin:0px;

}

div {

border-radius: 10px;

}

#wrapper {

padding: 0%;

}

#wrap {

float: left;

position: relative;

width: 100%;

}

#header {

position:fixed;

width:inherit;

z-index:1;

paddi

...

实现你想要的技巧是在.text上使用width:auto并限制它的max-width .. 新工作的jsFiddle div.roll-button .text {

width: auto;

max-width:0px;

}

div.roll-button:hover .text {

max-width:100px; /* set this to the maximum allowed value.. */

}

The trick to achieving what y

...

出现此问题的原因是padding和border不是width: 100%一部分width: 100% 。 假设你确实想要绝对定位#exp_wrap ，请使用： http ： //jsfiddle.net/thirtydot/USvTC/1/ 我删除width: 100% .bar_wrap / #exp_wrap上的width: 100% ，并添加right:5px; 在#exp_wrap 。 块元素(如div默认为width: auto ，并获取完整的可用水平空间。 这类似于width: 100

...

你需要指定100％的东西......在这种情况下， html/body * {

margin: 0;

padding: 0;

}

html,

body {

height: 100%;

}

div {

background: tomato;

width: 100px;

height: 100px;

-webkit-animation: animateThis 1s ease-in;

-webkit-animation-fill-mode: f

...