使用JS Promises从显示无动画

Question

我正在尝试动画显示属性设置为null的元素。目标是重新创建一个bootstrap在模态中做的事情。

进一步说明： 设置为在页面加载时不显示的元素，但是当用户单击某个按钮时，它会显示动画（例如淡入）。然后，当用户再次单击关闭按钮或该按钮时，它会淡出并且其显示属性再次设置为无。

问题： 当box显示属性设置为none时。然后我点击按钮。它的显示被设置为阻止，并且添加类“显示”同时和瞬间发生，因此元素只显示而不是动画

这是我的代码：

HTML：

<button id="btn">Show / Hide</button>
<div id="box" class="show">

</div>

CSS：

#box {
    background-color: aquamarine;
    height: 100px;
    width: 100px;
    opacity: 0;
    transition: ease all 0.3s;
}

#box.show {
    transition: ease all 0.3s;
    opacity: 1;      
}

的Javascript：

var box = document.querySelector("#box");
var btn = document.querySelector("#btn");
box.style.display = "none"
btn.addEventListener("click", function () {
  if(box.style.display == "none") {
    return new Promise(function(resolve, reject) {
      box.style.display = "block";
      resolve();
    }).then(function() {
      box.classList.add('show');
    });
  } else if(box.style.display == "block") {
    return new Promise(function(resolve, reject) {
      box.addEventListener('transitionend', function () {
        box.style.display = "none";
      })
      resolve();
    }).then(function() {
      box.classList.remove('show');
    });
  }
});

JSFiddle：https://jsfiddle.net/ptLggbmb/1/

Answer 1

除了使用Promise之外，您可以简单地使用transitionend侦听器，并且在将类应用到框之前，fadeIn动画会强制执行布局/重排。

＆＃13;

＆＃13;

var box = document.querySelector("#box");
var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
  var prevDisplay = box.style.display;
  var listener = function() {
    box.style.display = "none";
    removeListener(listener);
  };
  if (prevDisplay !== "none") {
    addListener(listener);
    box.classList.remove('show');  
  } else {
    removeListener(listener);
    box.style.display = null;
    box.offsetLeft;
    box.classList.add('show');
  }

  function addListener(fn) {
    box.addEventListener('transitionend', fn);
  }

  function removeListener(fn) {
    box.removeEventListener('transitionend', fn);
  }
});

＆＃13;

#box {
  background-color: aquamarine;
  height: 100px;
  width: 100px;
  opacity: 0;
  transition: ease all 0.3s;
}

#box.show {
  transition: ease all 0.3s;
  opacity: 1;
}

＆＃13;

<button id="btn">Show / Hide</button>
<div id="box" class="show">

</div>

＆＃13;

＆＃13;

＆＃13;