How to make a smooth appearance of a new frame?

Question

css

Greetings friends. I really need your help on this issue. I add CSS property transition: all 1000ms ease; class "active" via jquery. The "active" class is assigned to the currently active frame, but it appears as abruptly as without it. Why doesn't this method work? How to make the old frame fade out and the new one appear from a transparent background at a speed of 1 second?
Here is the script I'm working with: . Clicking on the arrows changes the frame.

Answer 1

Hey! transition doesn't work with display property , use opacity instead . The transition property must be defined immediately, and not be hung / removed dynamically
.slider-item {
opacity: 0;
vertical-align: middle;
transition: all 1000ms ease;
width: 100%
}
.slider-item.active {
opacity: 1;
}