时间戳

首页 > 解决方案 > 使用 JavaScript 添加类时，css 转换无法按预期工作

javascript - 使用 JavaScript 添加类时，css 转换无法按预期工作

问题描述

我正在尝试使用 css 和 JavaScriptclassList.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');
})

标签： javascripthtmlsasscss-transitions

解决方案

将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

推荐阅读