如何将过渡应用于伪元素？

如何解决如何将过渡应用于伪元素？

我正在构建一个 React 应用程序，但在对伪元素应用 CSS 转换时遇到问题。

这是伪元素的类：

.collapsed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(transparent,transparent,white,white);
    z-index: 100;
    opacity: 1;
  transition: opacity 2s;
}

这会在具有以下效果的“折叠”div 顶部创建一个叠加层：

当用户单击“阅读更多”按钮时，我希望白色渐变逐渐消失。所以我有这门课：

.expanded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(transparent,white);
  z-index: 100;
  opacity: 0;
}

当用户单击 READ MORE 按钮时，我会换出 .collapsed 类并应用 .expanded 类。这个想法是 .collapsed::before 伪元素的不透明度为 1，不透明度转换为 2 秒。 .expanded::before 伪元素的不透明度为 0。所以我希望不透明度在 2 秒内从 1 过渡到 0。

但它不起作用。我的猜测是，这是因为折叠的伪元素与展开的伪元素是不同的元素。转换仅在您更改 SAME 元素上的样式或类时起作用。

但是如何在同一个伪元素上更改样式或类？

解决方法

在将 .collapsed 类替换为 .expanded 时，您忘记向 .expanded 类的伪元素添加过渡。

.expanded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(transparent,transparent,white,white);
  z-index: 100;
  opacity: 0;
  transition: opacity 2s; // added transition. 
}

这是演示。

var readmore = document.getElementsByClassName('read-more');
var card = document.getElementsByClassName('card');

function toggle() {
  for (var i = 0; i < card.length; i++) {
      if (card[i].classList.contains('collapsed')) {
        card[i].classList.remove('collapsed')
         card[i].classList.add('expanded');
      } 
      else {
        card[i].classList.add('collapsed');
        card[i].classList.remove('expanded');
      }
    }
}

.card {
  position: relative;  
}

.collapsed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(transparent,white);
    z-index: 100;
    opacity: 1;
  transition: opacity 2s;
}

.expanded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(transparent,white);
  z-index: 100;
  opacity: 0;
  transition: opacity 2s;
}

<div class="wrapper">
  <div  class="card collapsed">
  <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Quas repudiandae iusto nihil veritatis officia,veniam. Fugit saepe,culpa nihil modi repellendus quos velit assumenda,ipsa,pariatur expedita voluptas quaerat debitis! Lorem ipsum dolor sit amet,pariatur expedita voluptas quaerat debitis!</p>
  </div>
  <a id="read_more" class="read-more" href="javascript: void(0)" onClick="toggle()">Read more</a>
</div>