相关疑难解决方法(0)

我正在尝试<ul>使用CSS过渡进行滑动.

将<ul>在开始关闭height: 0;.悬停时,高度设置为height:auto;.然而,这导致它只是出现而不是过渡,

如果我从那里height: 40px;开始height: auto;,那么它会向上滑动height: 0;,然后突然跳到正确的高度.

如果不使用JavaScript,我怎么能这样做呢？

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
} …

我想创建一个仅由类名驱动的扩展/折叠动画(javascript用于切换类名).

我正在上课 max-height: 4em; overflow: hidden;

和另一个max-height: 255em;(我也尝试了价值none,根本没有动画)

这个动画: transition: max-height 0.50s ease-in-out;

我使用CSS过渡在它们之间切换,但是浏览器似乎在动画所有这些额外em的动画,因此它会在崩溃效果中产生延迟.

是否有一种方法(具有相同的精神 - 使用css类名)没有副作用(我可以放置较低的像素数,但这显然有缺点,因为它可能会切断合法的文本 - 这是价值很大的原因,所以它不会切断合法的长篇文章,只会是荒谬的长篇文章)

查看jsFiddle - http://jsfiddle.net/wCzHV/1/(单击文本容器)