使用 css transition 和 vanilla JavaScript 更改不透明度僅在淡出時有效

Question

這個代碼筆顯示了我的問題： http ://codepen.io/PiotrBerebecki/pen/pNvpdG

當用戶點擊大按鈕時，css opacity減少到 0。因為我應用了以下規則： transition: opacity 0.5s ease-in-out; 淡出動畫很流暢。

我想在下一個按鈕淡入時實現相同的平滑過渡。但是由於某種原因，下一個按鈕突然出現而沒有任何過渡。

你知道是什么導致了這個問題以及如何解決它嗎？

 console.clear(); (function() { // Data for the app const model = { buttons: ['tomato', 'blue'], currentButton: -1 }; // Logic for the app const controller = { init: function() { view.init(); }, getButtonName: function() { model.currentButton = (model.currentButton + 1) % model.buttons.length; return model.buttons[model.currentButton]; } }; // View for the app const view = { init: function() { this.root = document.getElementById('root'); this.showNext(); }, animationDelay: 500, showNext: function() { // Get next button name const buttonName = controller.getButtonName(); // Create button DOM element const buttonElement = document.createElement('div'); buttonElement.className = 'button'; buttonElement.id = buttonName; buttonElement.textContent = buttonName; buttonElement.style.opacity = 0; // Add event listender for the button buttonElement.addEventListener('click', event => { // Reduce opacity buttonElement.style.opacity = 0; // Remove the button from DOM setTimeout(() => { this.root.removeChild(buttonElement); }, this.animationDelay + 10); // Start the function to show next button setTimeout(() => { this.showNext(); }, this.animationDelay + 20); }); // Add button to DOM this.root.appendChild(buttonElement); // Show button by increasing opacity buttonElement.style.opacity = 1; } }; // Start the app controller.init(); }());

 #tomato { background: tomato; } #blue { background: DeepSkyBlue; } .button { transition: opacity 0.5s ease-in-out; width: 100%; height: 50vh; border: solid 3px black; cursor: pointer; }

 <div id="root"></div>

Answer 1

添加一個類（在 Snippet 是.active ）添加以下內容：

CSS

.button {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
  height: 50vh;
  border: solid 3px black;
  cursor: pointer;
}
.button.active {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

JavaScript

  ...
  // Reduce opacity
  buttonElement.classList.toggle('active');
  buttonElement.style.opacity = 0;
  ...
  // Show button by increasing opacity
  buttonElement.classList.toggle('active');
  buttonElement.style.opacity = 1;

片段

 console.clear(); (function() { // Data for the app const model = { buttons: ['tomato', 'blue'], currentButton: -1 }; // Logig for the app const controller = { init: function() { view.init(); }, getButtonName: function() { model.currentButton = (model.currentButton + 1) % model.buttons.length; return model.buttons[model.currentButton]; } }; // View for the app const view = { init: function() { this.root = document.getElementById('root'); this.showNext(); }, animationDelay: 500, showNext: function() { // Get next button name const buttonName = controller.getButtonName(); // Create button DOM element const buttonElement = document.createElement('div'); buttonElement.className = 'button'; buttonElement.id = buttonName; buttonElement.textContent = buttonName; buttonElement.style.opacity = 0; // Add event listender for the button buttonElement.addEventListener('click', event => { // Reduce opacity buttonElement.classList.toggle('active'); buttonElement.style.opacity = 0; // Remove the button from DOM setTimeout(() => { this.root.removeChild(buttonElement); }, this.animationDelay + 10); // Start the function to show next button setTimeout(() => { this.showNext(); }, this.animationDelay + 20); }); // Add button to DOM this.root.appendChild(buttonElement); // Show button by increasing opacity buttonElement.classList.toggle('active'); buttonElement.style.opacity = 1; } }; // Start the app controller.init(); }());

 #tomato { background: tomato; } #blue { background: DeepSkyBlue; } .button { opacity: 0; transition: opacity 0.5s ease-in-out; width: 100%; height: 50vh; border: solid 3px black; cursor: pointer; } .button.active { opacity: 1; transition: opacity 0.5s ease-in-out; }

 <div id="root"></div>

Answer 2

這應該有效，代碼筆鏈接： http : //codepen.io/saa93/pen/gLbvmQ

您需要添加它而不是直接將不透明度設置為 1

// Show button by increasing opacity
buttonElement.style.opacity = 0;
setTimeout(() => {
    buttonElement.style.opacity = 1;
}, this.animationDelay + 20);   

Answer 3

在this.root.appendChild(buttonElement);

您應該將不透明度設置為 0，並讓瀏覽器在buttonElement.style.opacity = 1;之前進行渲染buttonElement.style.opacity = 1;

順便說一句，我認為刪除和添加不是一個好方法的元素

.button {

  width: 100%;
  height: 50vh;
  border: solid 3px black;
  cursor: pointer;
   animation-name: example;
    animation-duration:3.5s;

}
@keyframes example {
        0%   {opacity:1}
        50%  {opacity:0}
    100%  {opacity:1}

}

你真正想要的是使用這樣的動畫： JSFIDDLE 示例

這樣，動畫僅使用 css 來回執行所有這些計時和不透明度