如何使用width: auto来过渡内容的宽度？

14 浏览
0 Comments

如何使用width: auto来过渡内容的宽度？

我有一个元素，当其内容发生变化时，我希望能够动画化其宽度。它的宽度设置为auto，并且这个值从不改变。我看到过这个技巧，但那是用于在两个已设置的值之间进行过渡。我并没有改变任何值，只是改变了内容，我希望元素的大小能够动画化。CSS能实现这个吗？\n这是我代码的简化版本：\n

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

\n



  
    Hello!

\n当用户悬停在元素上时，我希望尺寸的变化能够动画化。

0

2 答案

0 Comments

如何使用width: auto过渡内容的宽度？

问题的原因是希望在点击按钮时，能够展开一个带有内容的列表。列表的初始高度为0，点击按钮后，列表的高度应该过渡到600px。

解决方法如下：

首先，在HTML中创建一个带有按钮和列表的结构。按钮用于触发展开效果，列表初始时高度为0。

<button id="expand-btn">展开</button>
<ul>
  <li>Hihi</li>
  <li>Hello</li>
  <li>Rap star</li>
  <li>Hiphop</li>
</ul>

然后，在CSS中设置列表的样式。设置背景颜色为黄色，隐藏溢出内容，设置过渡时间为1秒，过渡属性为max-height，初始高度为auto，最大高度为0。通过添加.active类来改变列表的最大高度为600px。

ul {
  background-color: yellow;
  overflow: hidden;
  transition-duration: 1s;
  transition-property: max-height;
  height: auto;
  max-height: 0;
}
ul.active {
  max-height: 600px;
}

最后，在JavaScript中添加一个点击事件监听器，当按钮被点击时，切换列表的.active类，从而触发过渡效果。

const expandBtn = document.getElementById('expand-btn');
expandBtn.onclick = (e) => {
  e.target.nextElementSibling.classList.toggle("active");
}

这样，当点击按钮时，列表的高度将平滑地从0过渡到600px，实现了内容宽度的过渡效果。

0
0 Comments

问题的原因是无法使用动画来过渡auto的宽度。解决方法有两种，一种是使用max-width/max-height的技巧，另一种是使用脚本设置宽度。

对于max-width/max-height的技巧，需要给它一个足够大的值来容纳最宽的内容。同时，通过设置transition属性可以实现过渡效果。当鼠标悬停在元素上时，将max-width设置为所需的宽度。

如果需要更精确的宽度过渡效果，可以使用脚本来设置宽度。

在代码中，myspan类定义了一个内联块级元素，并设置了字体大小、背景颜色和垂直对齐方式。伪元素::after用于显示内容，并设置了字体大小、最大宽度和过渡效果。当鼠标悬停在元素上时，::after的最大宽度将被设置为80px，并添加过渡效果。

解决问题时，发现原因是使用了line-height: 0来修复布局问题，这会导致overflow: hidden时图标隐藏。因此，需要删除line-height: 0来解决问题。

以上是关于如何使用max-width、max-height以及脚本来过渡内容宽度的解决方法。

0