显示无的CSS动画不起作用[重复]

Question

我有一个屏幕，其中包括左侧的按钮和右侧的图片，当我单击按钮 CLICK 时，我希望左侧的图像不显示任何动画。稍后，另一个以前没有显示的框应该显示块。

function calculate() {
  document.getElementById('body-mass-image').classList.add('body-mass-over');
  var el = document.getElementById('body-mass-result-box');
  if (el) {
    el.className += el.className ? '__show' : '__show';
  }
}

.calculate__content__result { display: none; }
..calculate__content__result__show { display: block; }

#body-mass-image {
  transition: all 1s linear;
  display: block;
  opacity: 1;
}

#body-mass-image.body-mass-over {
  display: none;
  transition: opacity 1s ease-out;
  opacity: 0;
}

<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
  <div class="form-group">
    <div class="calorie__button__area">
      <button type="submit" class="button-secondary button__calculate" onclick="calculate()">CLICK</button>
    </div>
  </div>
  <div class="col-lg-6 col-md-12 col-sm-12 calculate__content" id="body-mass-image">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBwAo9q5FtWQKO_hKSmgkKkrMZZtirYph9xg&usqp=CAU" alt="Weight Calculation Image"/>
  </div>
  <div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result" id="body-mass-result-box">
    <div class="row">
      <div class="col-lg-2 col-md-12 col-sm-12"></div>
      <div class="col-lg-8 col-md-12 col-sm-12">
        <div class="result__box">
        <div class="title">Vücut Kitle End.:</div>
        <div class="calorie">33.9</div>
        <div class="title">Durum:</div>
        <div class="calorie">Şişman/Obez</div>
      </div>
    </div>
  <div class="col-lg-2 col-md-12 col-sm-12"></div>
  </div>
</div>

所以，我不显示图像并显示块结果__box，但问题是我没有动画。

Answer 1

如果我能清楚地理解你的话，你正试图让图像在过渡时使用 display none 慢慢消失，但出于技术上的原因，这永远不会奏效。

过渡将在不透明度上完美运行，因为不透明度的值倒计时范围从值 0、0.1、0.2、0.3 到 1.0，因此有可能在您给定的 1 秒内，它会通过这些值进行转换...但是显示没有倒计时，要么显示要么不显示

我担心，transition 不能在 display 上工作，如果你想让图像消失，考虑使用 opacity 结合高度和宽度。

.weight__calculations #body-mass-image {
  transition: all 1s linear;
  width: // the initial width;
  height: //the initial height;
  opacity: 1;
}

.weight__calculations #body-mass-image.body-mass-over {
  transition: opacity 1s ease-out;
   height: 0;
   width: 0;
  opacity: 0;
}

但是如果你真的需要使用 display none，那么可以考虑在 JavaScript 中使用 setTimeout 在 1 秒后将图像显示为 none，到那时你的动画已经完成了不透明度。

但同样，您试图通过一些过渡实现使 result_box 出现并且图像在单击时消失...在这种情况下不应使用过渡，但您需要动画，因为过渡需要之前的“悬停”等动作实现，但动画是自己实现的……你必须为图像和结果框设置一个出现和消失的 css：

例子

. result_box_appearance{
   opacity: 0;
   height:0;
   width:0;
   animation: 1s linear;
   animation-name: result_box_appearance;
}


@keyframes result_box_appearance{
0%{
   opacity: 0;
   height:0;
   width:0;
}

100%{
   opacity: 1;
   height: 70px;
   width: 90px;
}

}

因此，当您单击按钮时，您现在可以将第二个 className 分配给 result_box。

result_box.className = "result_box result_box_appearance";

你必须这样做才能让 result_box 和 image 都消失

Answer 2

您可以使用 max-height: 0 代替显示块；并显示它使用 max-height: 999px 如果这个高度对你来说足够大。

const button1 = document.getElementById('show');

button1.addEventListener('click', () => {
  const image = document.getElementById('image');
  const text = document.getElementById('text');
  
  if (image.classList.contains('show')) {
    image.classList.remove('show');
    text.classList.add('show');
    return;
  }
  image.classList.add('show');
  text.classList.remove('show');
});

.block {
  overflow: hidden;
  height: 100px;
  width: 100px;
  transition: 0.3s all ease;
  opacity: 0;
  max-width: 0;
  max-height: 0;
}
.block.show {
  opacity: 1;
  max-width: 100px;
  max-height: 100px;
}
img {
max-width: 100%;
}

<button type="button" id="show">
  toggle
</button>
<div id="image" class="block show">
  <img src="https://www.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" alt="some title" />
</div>

<div id="text" class="block">
  some text
</div>