Implement fade in / fade out with CSS only


Fade in/fade out is implemented by JQuery, but since there was a way to do it only by changing the class including CSS animation, I will post it.

Prior knowledge

display: none; → display: block You can not make a transition on elements that make this transition. (Transition: display 1s ease 0s specification does not work.) Perhaps it seems that deleting from the rendering tree is affecting. (Since rendering adjusts the position and color after the rendering tree is created/changed first)

Show/hide modal

If you search, you probably see how to do animation using opacity, but you can click with opacity: 0 alone. So I use pointer-events: none to prevent clicks.

.modal {
    pointer-events: none;
    transition: opacity 1s ease 0s;
    position: fixed;
    z-index: 0;

    &.is-active {
        opacity: 1;
        pointer-events: auto;

 }
}

After that, when you want to display, add an is-active class. When you want to hide it, you can display/hide while animating it by deleting the is-active class.

Show/hide slideshow

By applying the above, you can create a slideshow only by rearranging the class.

ul {
    position: relative;
    height: 100%;

    li {
        opacity: 0;
        pointer-events: none;
        transition: opacity 1s ease 0s;
        position: absolute;
        z-index: 0;

        &.is-active {
            opacity: 1;
            pointer-events: auto;
            z-index: 1; 

    }

}



Only by setting the value of "z-index" only for the element in the active state, it is displayed.

Modal in jQuery

In jQuery's fadeIn method · fadeOut method, since processing is executed one after another without waiting for the end of the animation, it is necessary to take action such as to execute the processing after the animation stops.

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?