CSS过渡自动宽度
我有一个元素，其内容更改时我想为其宽度设置动画。它具有width: auto，并且永远不会改变。我已经看到了这个技巧，但这是为了在两个值之间进行转换并设置一个。我根本不操纵值，仅操纵内容，我希望元素的大小随动画而变化。CSS完全有可能吗？
这是我的代码的简化版本：
.myspan {
background-color: #ddd;
}
.myspan:hover::after {
content: "\00a0\f12a";
font-family: Ionicons;
font-size: 80%;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
<body>
<span class="myspan">Hello!</span>
</body>
</html>
当用户将鼠标悬停在元素上时，我希望更改的大小可以动画。
问题答案：
正如我所评论的，还不能设置动画auto，所以请使用max-width/ max- height技巧，或者，如果需要更精确的设置，请使用脚本设置宽度。
使用max-width/ max-height技巧，为它提供足够大的值以容纳最宽的值。
堆栈片段
.myspan {
display: inline-block;
font-size: 30px;
background-color: #ddd;
vertical-align: bottom;
}
.myspan::after {
content: " \00a0\f12a ";
font-family: ionicons;
font-size: 80%;
display: inline-block;
max-width: 0;
transition: max-width .6s;
vertical-align: bottom;
overflow: hidden;
}
.myspan:hover::after {
max-width: 80px;
transition: max-width 1s;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<span class="myspan">Hello!</span>
-
问题内容： 因此，我了解了如何同时执行CSS3过渡和动画。我用谷歌搜索的不清楚是什么时候使用它。 例如，如果我想使球弹跳，很明显，动画是必经之路。我可以提供关键帧，而浏览器将做中间帧，并且我将获得一个不错的动画。 然而，在某些情况下，无论哪种方式都可以达到上述效果。一个简单而常见的示例是实现Facebook风格的滑动抽屉菜单： 可以通过以下过渡来实现此效果： 或者，通过类似这样的动画： 使用HTM
-
问题内容： 我有一个网站，我决定用纯CSS代码段替换基于jquery的切换框。当我使用固定的高度值进行过渡时（CSS的最后几行），效果很好，但是使用该值时，动画丢失了，只有高度变化才起作用！ 有没有办法将其与自动值一起使用？我想使用可变文本而不使用脚本。 问题答案： 如果您只想使用CSS，则一种解决方案是过渡而不是将其设置为比以往任何时候都更大的值… 您将需要稍稍缩短转换的速度，但是至少该示例使您
-
问题内容： 鉴于以下几点，我如何使我的最后一列自动调整大小？（最后一列应自动调整内容的宽度。假设我只有1 li元素应该收缩，而我只有3 li元素等等）： CSS： 问题答案： 以下将解决您的问题： 灵活的基于类的解决方案 一种更灵活的解决方案是创建一个类，并将其应用于您要确保其内容适合一行的任何列： 然后在您的HTML中：
-
问题内容： 我想创建仅由类名支持的展开/折叠动画（使用JavaScript来切换类名）。 我要上一堂课 另一个（我也尝试过value ，它根本没有动画） 进行动画处理： 我使用CSS过渡在它们之间进行切换，但是浏览器似乎在为所有这些多余的动画设置动画，因此它会延迟折叠效果。 有没有办法做到这一点（本着同样的精神- 使用CSS类名）没有副作用（我可以减少像素数，但是显然有缺点，因为它可能会切断合法文
-
问题内容： 我希望div使用CSS从右角2滑入。 如果我仅使用[ngClass]来切换类并利用不透明性，则可以正常工作。但是li不想从一开始就渲染该元素，因此我先用ngIf“隐藏”了它，但是之后过渡将无法工作。 问题答案： 更新4.1.0 柱塞 另请参见https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-
-
主要内容：1. transition-property,2. transition-duration,3. transition-timing-function,4. transition-delay,5. transition通常当 CSS 的属性值更改后，浏览器会立即更新相应的样式，例如当鼠标悬停在元素上时，通过 :hover 选择器定义的样式会立即应用在元素上。在 CSS3 中加入了一项过渡功能，通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画，但无需借