html添加css过渡效果,html – 使用css3对show / hide元素的css过渡效果[复制]

对于转换,您需要2个值(开始/结束),可以按步骤,数字进行划分.

none和block不能并且只能从一个切换到另一个,最终可能会延迟它.

折衷方案可能是使用max-height并设置溢出,以防短时间值.

.showMore {

font-size: 14px;

display: block;

text-decoration: underline;

cursor: pointer;

}

.showMore + input {

display:none;

}

.showMore + input + * {

max-height: 0;

/*and eventually delay an overflow:auto; */

overflow:hidden;

transition: max-height 0.5s, overflow 0s;

}

.showMore + input:checked + * {

/* here comes the compromise, set a max-height that would for your usual contents*/

max-height: 5em;

overflow:auto;

transition: max-height 0.5s, overflow 0.5s 0.5s;

}

Heading 1

Hidden 1 Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1Hidden 1

Heading 2

Hidden2