If you switch the display attribute from none to block, the transition will not occur on other elements. 强>

To resolve this issue, always allow the element to be display: block, but hide the element by adjusting any of the following:

1. Set the height to 0.
2. Set the opacity to 0.
3. Place the element outside another frame with an overflow:hidden element.

There may be more solutions, but if you switch the element to display: none, the conversion cannot be performed. For example, you could try something like this:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

But this doesn't work. In my experience, I've found that this doesn't do anything.

So you always need to preserve the element display: block - but you can get around it by doing:

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}