'CSS detect which tab is rendered and change opacity for the active tab dynamically

so I have a jsx element that looks like this

            </div>
            {mainHeader == 1 && (
              <Profile />
            )}
           {mainHeader == 2 && (
              <Account />
            )}
        {mainHeader == 3 && (
              <Settings />
            )}
          </div>

this is some sort of tab, based on which button is selected in the header a different element appears. this might not be the best way to implement tabs, but it works fine.

Anyway. in my CSS I have this in the parent div of all those elements

.content-wrapper {
  opacity: 1;
  transition: visibility 0s 0.3s, opacity 0.3s linear;

what I want to achieve is that when I change elements from one another it fade in/out but this is not working any idea how I can achieve that?

cssreactjsjsx


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions