Trick: CSS 3 + checkbox implements six basic animations of JQuery.

Trick: CSS 3 + checkbox implements six basic animations of JQuery.

In JQuery, there are six basic animation functions: show ()/hide (), fadeIn ()/fadeOut (), and slideUp ()/slideDown (). This article uses CSS3 + checkbox to implement these six basic animations.

Implementation of show ()/hide ()

The implementation of show ()/hide () mainly controls the display attribute of the element.
Html:

show/hide Click show/hide above to implement show ()/hide ()

Css:

#box{    position:relative;}#box *:not(#shbox){    display:inline-block;}input{    position:absolute;    left:-10000000px;}:checked~#shbox{    display:none;}label{    width:100px;    height:30px;    line-height:30px;    text-align:center;    border:1px solid green;    position:absolute;    left:0px;    cursor:pointer;    border-radius:5px;}#shbox{    background:#ccc;    color:red;    width:200px;    height:200px;    border:1px solid blue;    box-sizing:border-box;    padding:50px;    position:absolute;    top:50px;}

Running results: https://jsfiddle.net/dwqs/1LykzL2f/1/embedded/result/

Implementation of fadeIn ()/fadeOut ()

The implementation of fadeIn ()/fadeOut () mainly controls the opcity attribute of elements. The preceding css is still used in html. The modification is as follows:

:checked~#shbox{    opacity:0;}

FadeIn ()/fadeOut () can control the speed of Fade-in/fade-out. Similarly, adding the transition attribute to # shbox can simulate this effect:

#shbox{    transition:opacity 2s;}

Running Effect: https://jsfiddle.net/dwqs/2txfyr1e/embedded/result/

Implementation of slideUp ()/slideDown ()

SlideUp ()/slideDown () implements the roll-up and drop-down by changing the height of the element. The preceding css is still used in html. The modification is as follows:

:checked~#shbox{    height:0px;}#shbox{    background:#ccc;    overflow-y:hidden;    color:red;    width:200px;    height:200px;    box-sizing:border-box;    transition:all 2s;    position:absolute;    top:50px;}

# Overflow-y: hidden is added to shbox to hide the text. Otherwise, # The text in shbox will still be displayed. transition implements a transition and the border attribute is removed.
Running results: https://jsfiddle.net/dwqs/xyu58nu8/3/embedded/result/

The main technique to summarize is to use the checked attributes of checkbox (or radio) to provide the following five methods for common hidden elements:
Display: none; // height: 0px; opacity: 0; position: absolute; left:-11111111px; visibility: hidden; // occupies space
Zhang has explained this in more detail: some methods for hiding elements in CSS