javascript - 将 CSS 过渡或 Javascript 动画添加到自动调整大小的 flexbox 布局

Question

我正在试验一种设计模式，使用 .expands 为 .expanded 自动调整大小的 flexbox 元素切换 .hidden 子类.

类似于:

const expandClick = e => {
  e.currentTarget.querySelectorAll('.expanded').forEach(child => {
    child.classList.toggle('hidden')
  })
}

document.querySelectorAll('.expands').forEach(expandable => {
  expandable.addEventListener('click', expandClick)
})

https://jsfiddle.net/vpc8khq8/

当我的内部内容失去 display: none 属性时，我希望通过轻微的弹跳来缓和高度，但我不太确定如何使用 vanilla CSS 实现它过渡或一小撮 JS。

我看到这篇文章:How can I transition height: 0; to height: auto; using CSS?

但许多答案看起来更像是具有奇怪副作用和过多 js/css 的 hack，而不是简单、轻量级的解决方案。

这对 jQuery 有用:https://jsfiddle.net/cm7a9jr7/

const expandClick = e => {
  $(e.currentTarget).children('.expanded').each(function() {
    $(this).slideToggle('slow', 'swing', function() {
      $(this).toggleClass('hidden')
    })
  })
}

$(() => $('.expands').on('click', expandClick))

但是，我想使用更精简的东西。是否有任何推荐的库或简单的方法可以在 CSS 中实现这一点？

Answer 1

我已经更新了你的 fiddle https://jsfiddle.net/vpc8khq8/2/

您可以通过将隐藏部分的最大高度设置为 0 来获得过渡效果，而不是使用 display none，然后将最大高度更改为固定高度(大于该部分的高度)以显示。这也需要你在父元素上设置溢出隐藏:

.expands{overflow: hidden;}

section.hidden { 
 max-height: 0;  
 background: red;
}

section{
  transition: 1s cubic-bezier(0.35, 1.17, 0.39, -0.61); 
  max-height: 400px;  
  background: blue;
}

我创建了一个半不错的立方体贝塞尔曲线来获得反弹效果，不过稍加改进您可能会得到更好的效果。

如果您打开 chrome devtools 并单击过渡图标，您可以从许多预设中进行选择，也可以通过移动曲线点来创建自己的预设。 Devtools 将向您展示转换的预览，您可以在不重新加载的情况下对其进行测试。然后只需将该三次贝塞尔曲线代码复制回您的 CSS。

为了更进一步，您可以在没有任何 JS 的情况下实现所有这些，使用隐藏的复选框和一些 CSS 技巧，类似于此示例:https://codepen.io/mrosati84/pen/AgDry