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

Question

我正在构建一个反应应用程序，但在对伪元素应用 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, transparent, white, white);
  z-index: 100;
  opacity: 0;
}

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

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

那么如何改变同一个伪元素的样式或类呢？

Answer 1

在将.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, transparent, white, 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, transparent, white, 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, 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!</p>
  </div>
  <a id="read_more" class="read-more" href="javascript: void(0)" onClick="toggle()">Read more</a>
</div>