Using CSS3 's transition property to realize sliding effect

First of all, invoke the basic knowledge of transition on W3school:

Definitions and usage

The Transition property is a shorthand property that is used to set four transition properties:

Transition-property

Transition-duration

Transition-timing-function

Transition-delay

Note: Always set the Transition-duration property, otherwise it will not have a transition effect if the time is 0.

Grammar

CSS code copy content to clipboard

Transition:property duration timing-function delay;

To achieve the sliding effect

Only need a DIV element to achieve sliding effect, to avoid the use of JavaScript elements of the animation (ie browser only support IE9 above)

HTML code

xml/html Code copy content to clipboard

2. < Div Style="height:200px; width:200px; border:1px solid #ccc; " >
4. < Div class="Slider" id="Slider"> Here is the content </ div>
6. </ Div >
8. < Button onclick="document.getElementById" (' Slider '). Classlist.toggle (' closed '); > Click to see </button>

CSS Code

CSS code copy content to clipboard

. Slider {

Overflow-y: Hidden;

max-height:500px;

/* Maximum Height * *

Background:pink;

height:200px;

width:200px;

/* WebKit Kernel Browser: Safari and chrome*/

-webkit-transition-property:all;

-webkit-transition-duration:. 5s;

-webkit-transition-timing-function:cubic-bezier (0, 1, 0.5, 1);

/* Mozilla Kernel Browser: firefox3.5+*/

-moz-transition-property:all;

-moz-transition-duration:. 5s;

-moz-transition-timing-function:cubic-bezier (0, 1, 0.5, 1);

/* opera*/

-o-transition-property:all;

-o-transition-duration:. 5s;

-o-transition-timing-function:cubic-bezier (0, 1, 0.5, 1);

/* ie9*/

-ms-transition-property:all;

-ms-transition-duration:. 5s;

-ms-transition-timing-function:cubic-bezier (0, 1, 0.5, 1);

}

. slider.closed {

max-height:0;

}

Demo Demo Address: http://www.zjgsq.com/example?pid=1166