相关疑难解决方法(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;
} …

如何添加展开/折叠转换？

http://jsfiddle.net/Bq6eK/1

我只是想知道以下是否可行,让我们说我们有一个dom元素,我们想要将这个元素包装在div中.所以在元素和它的父元素之间插入一个div.然后div成为元素的新父级.

但是为了使问题复杂化,我们已经在其他地方完成了以下事情:

var testElement = document.getElementByID('testID')

其中testID是要在div中包装的元素的子元素.所以在我们完成插入后,testElement仍然有效吗？

顺便说一句:我没有使用jquery.

有任何想法吗？

谢谢,

AJ

请看下面的jsFiddle

http://jsfiddle.net/SgyEW/10/

您可以单击各种按钮,这些按钮显示不同长度的内容,这会导致框增长/缩小.

我希望高度变化是动画的,所以它不是那么跳跃,我尝试通过添加:

-webkit-transition: all 1s linear;

但这在这个用例中没有任何影响.对于不需要JavaScript的解决方案的任何想法？

谢谢

我试图为Twitter Bootstrap按钮创建微调器.旋转器应指示正在进行的一些工作(即ajax请求).

这是一个小例子:http: //jsfiddle.net/AndrewDryga/zcX4h/1/

HTML(完整的jsfiddle):

Unknown element (no animation here!):
<p>
  <button class="btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </button>
</p>

Works when width is defined:
<p>
  <a class="btn btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </a>
</p>

CSS:

.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;

  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  width: auto; …

尝试使用CSS动画创建动画下拉菜单,没有任何JS.我以为我一直在吠叫正确的树,但看不到我出错的地方,这个简化的菜单项...

<div class="menu">Menu Item
    <ul>
        <li>Dropdown 1</li>
        <li>Dropdown 2</li>
        <li>Dropdown 3</li>
        <li>Dropdown 4</li>
        <li>Dropdown 5</li>
    </ul>
</div>

以下CSS;

.menu ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.menu:hover ul {
    height: auto;
}

认为应该成功地导致向下滚动div,但它只是不断出现.有什么想法吗？干杯