使用css过渡和vanilla JavaScript更改不透明度仅在淡出时才起作用

Question

此codepen显示了我的问题：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

在this.root.appendChild(buttonElement);

之后

你应该将不透明度设置为0并让浏览器在buttonElement.style.opacity = 1;

之前渲染时间

BTW我认为删除并添加不是一个好方法的元素

.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 EXAMPLE

这样，动画只使用css

来完成所有这些时间和不透明度

Answer 2

添加一个类（在代码段.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;

段

＆＃13;

＆＃13;

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();

}());

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

这应该可行，代码笔链接：http://codepen.io/saa93/pen/gLbvmQ

您需要添加此项而不是直接将不透明度设置为1

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