display:bloack & none 不支持过渡效果有什么办法代替吗？

Question

display:bloack & none 不支持过渡效果有什么办法可以平滑一点，
我用opacity: 1;可以但是有展位问题，请老哥，给个办法

Answer 1

如果是淡入淡出效果，opacity做动画处理，然后修改display已达到清除元素空间。

Answer 2

最近忙好久没看思否哈哈哈哈，补充下答案

之前我是审题不清没有看到你说的占位问题。

浅入浅出动效要想不占位一般都两种方式：

• 定位 + visiblity
• setTimeout 控制

推荐使用定位的方式，因为按照规范，需要添加动画的盒子，尽量脱离文档流，以防止页面频繁重绘。

定位 + visiblity

<div id="box">你好，世界</div>

@keyframes fadein {
  0% {
    transform: translate3d(0, -10%, 0);
    opacity: 0;
    visibility: hidden;
    z-index: -100;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    z-index: auto;
  }
}

@keyframes fadeout {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    z-index: auto;
  }

  100% {
    transform: translate3d(0, -10%, 0);
    opacity: 0;
    visibility: hidden;
    z-index: -100;
  }
}

.fade-show {
  animation: fadein 0.3s forwards;
  -webkit-animation: fadein 0.3s forwards;
}

.fade-hide {
  animation: fadeout 0.3s forwards;
  -webkit-animation: fadeout 0.3s forwards;
}

#box {
  position: absolute;
  width: 400px;
  height: 400px;
  background-color: pink;
}

setTimeout 控制

jquery 就是用的类似的方式，不过动画不够丝滑，有明显的停顿感。

<div id="box">你好，世界</div>

<button id="shift">切换</button>

@keyframes fadein {
  0% {
    transform: translate3d(0, -10%, 0);
    opacity: 0;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, -10%, 0);
    opacity: 0;
  }
}

.fade-show {
  animation: fadein 0.3s forwards;
  -webkit-animation: fadein 0.3s forwards;
}

.fade-hide {
  animation: fadeout 0.3s forwards;
  -webkit-animation: fadeout 0.3s forwards;
}

#box {
  width: 400px;
  height: 400px;
  background-color: pink;
}

window.onload = function () {
  var i = 0;
  document.getElementById("shift").addEventListener("click", function () {
    if (i % 2 === 0) {
      document.getElementById("box").style.display = 'block'
      document.getElementById("box").setAttribute("class", "fade-show");
    } else {
      document.getElementById("box").setAttribute("class", "fade-hide");
      setTimeout(function() {
        document.getElementById("box").style.display = 'none'
      }, 300)
    }
    ++i;
  });
};

Answer 3

max-height

Answer 4

node.classList.add('_opacity0')
node.addEventListener('transitionEnd', () => {
    node.classList.add('_displayNone')
}, { once: true })