时间戳

首页 > 解决方案 > 显示无的CSS动画不起作用

javascript - 显示无的CSS动画不起作用

问题描述

我有一个屏幕，左边有一个按钮，右边有一张图片，当我单击按钮 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，但问题是我没有动画。

标签： javascripthtmlcsscss-animationscss-transitions

解决方案

如果我能清楚地理解你，你正在尝试使用 display none on transition 让图像慢慢消失，由于技术原因，这将永远无法工作。

过渡将在不透明度上完美运行，因为不透明度的值倒计时范围从值 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 消失

推荐阅读