css 过渡未按预期工作 JavaScript 添加 class

Question

我正在尝试使用 css 和 JavaScript classList.add 函数创建过渡效果。我的预期行为是，当单击按钮时，会出现灰色背景，并且在该背景之上，另一个元素会从右侧滑入。目前一切都按预期显示，但由于某种原因没有发生幻灯片转换。有任何想法吗？我在下面创建了我的代码的基本版本：

html:

<button id="product-form__book-product">Add</button>

<div class="product-form-slider" id="product-form-slider">
  <div class="product-form-slider__inner" id="product-form-slider__inner">
    <span class="close" id="product-form-slider__close-button">&times;</span>
    <p>TEST</p>
  </div>
</div>

scss:

.product-form-slider {
  position: fixed;
  display: none;
  top: 0;
  z-index: 11;
  right: -65%;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  align-items: center;
  justify-content: center;
  right: 0;
  &.active {
    display: flex;
  }
}

.product-form-slider__inner {
  right: -65%;
  height: 100%;
  width: 65%;
  background-color: #fefefe;
  padding: 20px;
  box-shadow: 5px 5px 10px #545151;
  position: absolute;
  &.slide-in {
    right: 0;
    transition: right 1s linear;
  }
}

JavaScript:

var productFormBookButton = document.getElementById('product-form__book-product');
var productFormSlider = document.getElementById('product-form-slider');
var productFormSliderInner = document.getElementById('product-form-slider__inner');
var productFormSliderCloseButton = document.getElementById('product-form-slider__close-button');

productFormBookButton && productFormBookButton.addEventListener('click', showFormSlider);

function showFormSlider() {
  productFormSlider.classList.add('active');
  productFormSliderInner.classList.add('slide-in');
}

// Close slider on click of close button
productFormSliderCloseButton && (productFormSliderCloseButton.onclick = function() {
  productFormSliderInner.classList.remove('slide-in');
  productFormSlider.classList.remove('active');
})

Answer 1

将 transition 属性移动到主要类。

.product-form-slider {
  position: fixed;
  display: none;
  top: 0;
  z-index: 11;
  right: -65%;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  align-items: center;
  justify-content: center;
  right: 0;
  &.active {
    display: flex;
  }
}

.product-form-slider__inner {
  right: -65%;
  height: 100%;
  width: 65%;
  background-color: #fefefe;
  padding: 20px;
  box-shadow: 5px 5px 10px #545151;
  position: absolute;
  transition: right 1s linear;
  &.slide-in {
      right: 0;
  }
}

此外，如果您希望 display 等动画属性效果不佳。如果你想通过过渡显示和隐藏元素，你应该使用 opacity

Answer 2

我设法通过在转换时设置 2 毫秒 timeout 函数来解决这个问题。这样我强制转换发生在背景显示之后。

function showFormSlider() {
  productFormSlider.classList.add('active');
  setTimeout(function(){ productFormSliderInner.classList.add('slide-in') }, 2);
}

css 过渡未按预期工作 JavaScript 添加 class

css transition not working as expected with JavaScript add class

html

javascript

sass

css-transitions