Question

我一直在尝试为项目制作自定义轮播，当我单击前进和后退箭头时，我想在作为道具传递的两个预定义渐变之间进行转换。（这些已在另一个CSS文件中定义为类）

我知道背景图片实际上不是可动画的，因此我一直在研究techniques with pseudo elements。但是，所有这些仅在将鼠标悬停在背景本身上时才有效，我想知道是否有办法做到这一点，因此，当单击按钮时，渐变会切换。

当我单击按钮，然后使用transistionend事件侦听器将其删除时，我试图添加渐变CSS类，但是它不起作用。

以下是其中一个按钮的onClick方法示例

onClickIncrement = (e) => {
    this.IncrementItem();
    let test = Object.values(this.props.array);
    let gradient = test[this.state.clicks].props.gradient //predefined background image
    console.log(gradient)
    let box = document.querySelector('#carousel-hero')
    box.className = "c-hero u-breakout gradient " + gradient
}

这是渐变CSS类

.gradient {
    position: relative;
    z-index: 1;
  }

.gradient::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: white;
    z-index: -1;
    transition: opacity 0.15s linear;
    opacity: 0;
  }

.gradient:active::before {
    opacity: 1;
  }

基本上，它会在两个渐变之间产生“白色闪光”。理想情况下，它将在没有白色的情况下在两者之间过渡，但是我不知道如何将预定义的渐变传递到css

单击时两个背景渐变之间的过渡

0 个答案: