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

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 元素上的样式或类时，转换才有效。

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

标签： htmlcsscss-transitionspseudo-element

Answer 1

.collapsed在将class换成 时.expanded，您忘记向.expandedclass 的伪元素添加转换。

.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>