Question

前几天我读了一篇有趣的文章，我一直试图在我的工作流程中应用它。

https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29#.5a2q978fv

提到的一个概念是仅使用不透明度和变换动画元素的想法。我在过去的几天里一直在实施这个想法，并且发现它非常棒。

我遇到的一个问题是，如果元素处于不透明度0，则包含父元素仍会应用子元素的空间。我试图删除空间，将子元素缩放到几乎没有，但空间仍然是持久的。

我很好奇是否有人以这种方式工作并且建议如何使用子元素为父元素设置动画？

＆＃13;

function showHiddenBox() {
  let hiddenBox = document.querySelector('.hiddenbox')

hiddenBox.setAttribute('data-state', hiddenBox.getAttribute('data-state') === 'hidden' ? 'visible' : 'hidden');
}

＆＃13;

.parentbox {
  width: 200px;
  background-color: #564d49;
}
.showingbox {
  display: flex;
  align-content: flex-start;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: #63cdff;
}
.hiddenbox {
  width: 100%;
  height: 100px;
  transition: all 1s;
  background-color: pink;
}
.hiddenbox[data-state="hidden"] {
  opacity: 0;
  transform: scaleY(.1) translateY(-50px);
  transform-origin: top;
}
.hiddenbox[data-state="visible"] {
  opacity: 1;
}

＆＃13;

<div class="parentbox">
  <div class="showingbox">
    <button onclick="showHiddenBox()">Click Me</button>
  </div>
  <div class="hiddenbox" data-state="hidden"></div>
</div>

＆＃13;

为了进一步解释自己，我已经创建了这个代码段。我想创建一个只有不透明度和变换的动画，其中父元素的棕色不显示，但父元素将在创建子元素时展开。

Answer 1

function showHiddenBox() {
  let hiddenBox = document.querySelector('.hiddenbox')

hiddenBox.setAttribute('data-state', hiddenBox.getAttribute('data-state') === 'hidden' ? 'visible' : 'hidden');
}

.parentbox {
  width: 200px;
  background-color: #564d49;
}
.showingbox {
  display: flex;
  align-content: flex-start;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: #63cdff;
}
.hiddenbox {
  width: 100%;
  height: 100px;
  transition: all 1s;
  background-color: pink;
}
.hiddenbox[data-state="hidden"] {
  max-height: 0;
  transform: scaleY(.1) translateY(-50px);
  transform-origin: top;
}
.hiddenbox[data-state="visible"] {
  max-height: 300px;
}

<div class="parentbox">
  <div class="showingbox">
    <button onclick="showHiddenBox()">Click Me</button>
  </div>
  <div class="hiddenbox" data-state="hidden"></div>
</div>

使用max-height而不是opacity。夸大了最大高度。取决于它将如何为您服务。这是你想要的吗？

仅使用不透明度和变换的CSS动画

1 个答案: