Pure CSS sliding effect

If JavaScript can be avoided to achieve DOM element animation effects, I am very happy not to use JavaScript. Because it is more efficient and does not require the JS framework to process it step by step, the code is more elegant and elegant. It is hard to determine whether to use pure CSS to achieve a special effect: sliding up and down-content gradient hiding when sliding up, sliding down the content gradient display. The reason is that you may not be able to obtain the height of the content. After experiencing a variety of CSS attributes, I found a method to implement sliding effects using pure CSS. The HTML section only needs one element to demonstrate this effect, similar to the following:

<Div class = "slider"> you need to slide (hide) The content. The content length is random. You can also customize the class name! </Div>

 

Before seeing the effect, set some simple attributes: overflow-y and CSS animation:

. Slider {overflow-y: hidden; max-height: 500px;/* Estimated maximum height */transition-property: all; transition-duration :. 5 s; transition-timing-function: cubic-bezr (0, 1, 0.5, 1 );}

 

Now it's interesting: the nice effect is achieved using the max-height attribute. We set a reasonable default value for the element, create another class, Set max-height to 0, and then the element will achieve the sliding effect.

.slider.closed {      max-height: 0;  }  

 

After some debugging and correction, I really like the timeline transition effect function of cubic-bezr, and of course there may be better animation methods. In this step, we also need to switch the closed CSS class of the element when appropriate. If it is not perfect, then the problem arises. What if the height of the element is 100px or 0.1 million px? In this case, the elements are not fixed heights. At this time, there are two options: the first is to admit the failure and use the CSS framework. The second method is to use JavaScript to check the height of the DIV and inject the "max-height" attribute to stylesheet. The animation effect will be perfect. Remember: If you set max-height to 100%, it will be very unreliable. Although the max-width can be set like this, the height cannot be