html - How do I apply transitions to pseudo elements?

Question

I'm building a react application and I'm having a problem applying a CSS transition on a pseudo element.

Here is the class for the pseudo element:

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

This creates an overlay on top of the "collapsed" div which has this effect:

When the user clicks the READ MORE button, I would like the white gradient to fade away. So I have this class:

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

When the user clicks the READ MORE button, I swap out the .collapsed class and apply the .expanded class. The idea is that the .collapsed::before pseudo element has an opacity of 1 and an opacity transition of 2 seconds. The .expanded::before pseudo element has opacity 0. So I would expect the opacity to transition from 1 to 0 in 2 seconds.

But it doesn't work. My guess is that it's because the collapsed pseudo element is a different element than the expanded pseudo element. Transitions only work when you change styles or classes on the SAME element.

But then how does one change styles or classes on the same pseudo element?

question from:https://stackoverflow.com/questions/65839588/how-do-i-apply-transitions-to-pseudo-elements

Answer 1

while swapping out .collapsed class to .expanded, you forgot to add transition to the pseudo element of the .expanded class.

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

Here is the demo.

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>