html – 使用css3对showhide元素的css过渡效果[复制]

概述参见英文答案 > Transitions on the display: property                                    29个 我已经使用了这一堆代码,它完美无缺,但是在显示/隐藏更多内容时我无法添加转换.有人可以告诉我,我该怎么做？我想使用纯CSS,没有JS.谢谢大家！ .showMore{ font-size: 14px; display:bl 参见英文答案 > Transitions on the display: property                                    29个
我已经使用了这一堆代码,它完美无缺,但是在显示/隐藏更多内容时我无法添加转换.有人可以告诉我,我该怎么做？我想使用纯CSS,没有Js.谢谢大家！

.showMore{  Font-size: 14px;  display:block;  text-decoration: underline;    cursor: pointer;  }.showMore + input{  display:none;}.showMore + input + *{  display:none;}.showMore + input:checked + *{  display:block;    }

<label  for="_1">heading 1</label>  <input ID="_1" type="checkBox">  <div>HIDden 1</div>    <label  for="_2">heading 2</label>  <input ID="_2" type="checkBox">  <div>HIDden2</div>

现场演示：http://jsbin.com/xufepopume/edit?html,output

解决方法 对于转换,您需要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;}

<label  for="_1">heading 1</label><input ID="_1" type="checkBox"><div>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</div><label  for="_2">heading 2</label><input ID="_2" type="checkBox"><div>HIDden2</div>

总结

以上是内存溢出为你收集整理的html – 使用css3对show / hide元素的css过渡效果[复制]全部内容，希望文章能够帮你解决html – 使用css3对show / hide元素的css过渡效果[复制]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。