CSS过渡自动宽度

我有一个元素，其宽度我想动画时其内容更改。它有width: auto，这永远不会改变。我已经看到this trick，但这是为了在两个值之间进行转换而设置的。我根本不操纵数值，只使用内容，我希望元素的大小随着动画而改变。这是所有可能的CSS？CSS过渡自动宽度

这里是我的代码的简化版本：

.myspan { 
 
    background-color: #ddd; 
 
} 
 

 
.myspan:hover::after { 
 
    content: "\00a0\f12a"; 
 
    font-family: Ionicons; 
 
    font-size: 80%; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> 
 
<html> 
 
    <body> 
 
    <span class="myspan">Hello!</span> 
 
    </body> 
 
</html>

我想，当用户将鼠标悬停在元素进行动画处理的尺寸变化。

来源

2016-07-28 Luke Taylor

不能动画仅适用于CSS'auto'。或者使用链接的“最大高度”技巧，或者在页面加载时运行一个设置最终高度的小脚本 – LGSon

@LGSon在这种情况下，如何使用最大宽度技巧，其中两个值都处于转换状态是可变的？ –

另外，你什么意思是“什么时候内容”改变了？......他们为什么要这样做？如果您使用JS来做到这一点...那么使用JS'自动化'宽度变化， –

正如我所说，使用“最大宽度”/“最大高度”的伎俩。

给它一个足够大的值来容纳最广泛的值。

.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: all 1s; 
 
    vertical-align: bottom; 
 
    overflow: hidden; 
 
} 
 
.myspan:hover::after { 
 
    max-width: 80px; 
 
    transition: all 1s; 
 
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> 
 

 
<span class="myspan">Hello!</span>

来源

2016-07-28 18:12:22 LGSon

对，在伪元素上执行。我以为你建议把它放在主要元素，这就是为什么我感到困惑;） –

@LukeTaylor如果你的关闭图标有一个预定义的宽度，你可以只使用宽度，并给伪包含最终宽度图标 – LGSon

对不起，但你能给我多一点帮助吗？将'overflow：hidden'与'display：inline-block'结合使离子图消失。 –

CSS过渡自动宽度

回答

相关问题