相关疑难解决方法(0)

我正在尝试创建一个在悬停时扩展的div,但无法弄清楚如何使用div扩展内容.我尝试了一些溢出选项,但它们没有用.

.grow {
  padding: 5px 5px 5px 5px;
  border-radius:10px;
    height: 50px; 
    width: 22%; 
    margin: 5px 1% 5px 1%; 
    float: left; 
    position: relative; 
    transition:height 0.5s; 
    -webkit-transition:height 0.5s; 
    text-align: center;

}
.grow:hover {
    height: 115px; /* This is the height on hover */
}

<div class="grow" style="background-color: #2a75a9;">
    <h2>Title</h2> <br>
    Contrary to popular belief, Lorem Ipsum is not simply random text.  It has roots in a piece of classical Latin literature
</div>

这是JSFiddle

当内部文本发生变化时,我希望无缝扩展我的div(以非刺激的方式):

CSS transition: all 2s ease;非常适合颜色变化,手动设置宽度等(您可以在jsfiddle中尝试- 单击按钮切换宽度).但是当div的内部文本被更改时,div只会跳转到新的宽度而没有任何转换.

当内部文本发生变化时,如何才能使过渡工作？

谢谢!

我的div页面顶部有一个包含一些标题文本,其中mouseenter,应该展开(高度),以显示一些较小的文本.然后,mouseleave它应该缩回.这比听起来更难......

解决方案必须:

1. 从高处开始,只适合标题,高度适合所有文本.
2. 从一个过渡到另一个.
3. 尝试使用纯CSS.
4. 如果鼠标离开,则扩展动画暂停,反之亦然(默认为CSS,但不是jQuery).

我试过了:

1. :hover在我的样式表中使用,从设置像素值更改auto为,如此问题中所示(但在我的中它是纯CSS).这没有过渡.
2. 在扩展时使用设置高度,这对不同的视口大小不起作用.
3. 如本问题所示,使用max-height并扩展到大于实际展开的大小.这意味着转换不能正常工作,并且在不同设备上看起来不同.div
4. 使用jQuery .animate()auto的像素值,然后创建一个转换,如本问题所示,但动画必须在开始下一个之前完成,这意味着一系列动画可以在用户的​​鼠标后很长一段时间内继续远离div.

请在此处查看以上四个示例.

如上所述,纯CSS将是理想的,但如果不可能,我会很好用JavaScript(我更喜欢jQuery).

谢谢!:)

我正在使用带有transform属性的CSS过渡来在添加和删除元素时缩小元素.

然而,这个问题的一个问题是这个属性不会影响其他元素的流动,所以看起来被删除的元素会缩小,然后其余的元素突然跳跃.

如果我要为高度属性设置动画而不是使用变换,那就没问题,但是在实际使用中我使用的是可变高度的元素,所以我不知道我可以在它们之间设置动画的高度.

编辑:人们建议动画height属性(不会如上所述)或max-height属性.该max-height物业将努力在一定程度上,但你不能对齐定时完美的过渡将继续调整max-height过去元素的实际高度财产,直到过渡时间结束.

这些方法的另一个问题是它不使用您可以使用transform属性实现的平滑动画.对象的变换将顺利进行,但是随着浏览器以不同方式呈现这些过渡,以下元素的移动将会断断续续.

这是一个JSFiddle我的意思(尝试添加然后删除元素,并看到元素被删除时的跳转):

var button = document.querySelector("button");
var box = document.createElement("div");

box.className = "box";
box.appendChild(document.createTextNode("Click to delete"));

button.addEventListener("click", function(e) {
  var new_box = box.cloneNode(true);

  new_box.addEventListener("click", function(e) {
    this.className = "box deleting";
    window.setTimeout(function(e) {
      new_box.remove();
    }, 1000);
  });

  this.parentNode.appendChild(new_box);
});

button {
  font-size: 20pt;
}
.box {
  font-size: 20pt;
  margin: 10px;
  width: 200px;
  padding: 10px;
  background: pink;
  transform: scale(1, 1);
  transform-origin: top left;
}
.deleting …

我有一个菜单,有9个项目.我希望按钮高度为屏幕尺寸的40px或11%(屏幕的1/9).它是最大的.

现在我有:

min-height:40px;
max-height:11%;

它总是40px.即使我的屏幕尺寸大于那个.

我可以在css上实现,或者我必须使用javascript吗？

谢谢.

编辑

JSFiddle为它.

@Jeffery Khan是对的,解决了它.我有一个不同的元素推动它.谢谢!

我正在尝试为我的折叠组件（如引导程序）制作一个滑动（向上/向下）系统，但我无法获得要动画的元素的高度（没有高度，就不可能对我认为如此的元素进行动画制作 -如果这是错误的，那么我该如何为该元素设置动画？）！

注意：   [我想使用纯javascript]

document.getElementById('btn').addEventListener('click', function(){
  this.nextElementSibling.classList.toggle('active');
})

body{
  font-family: Segoe UI;
  font-size: 1rem;
  line-height: 1.5;
}

.collapse{
  border: 1px solid #e7e7e7;
  border-radius: .25rem;
  overflow: hidden;
}

#btn{
  padding: .75rem 1.25rem;
  width: 100%;
  border: none;
  font-size: inherit;
  background-color: #fff;
  cursor: pointer;
}

#btn:focus{
  outline: 0;
}

.collapse-content{
  font-size: 95%;
  padding: .75rem .75rem;
  display: none;
}
.collapse-content.active{
  display: block;
}

<div class="collapse">
  <button id="btn"> Click Me </button>
  <div class="collapse-content">
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt …

我做了一个css过渡,从高度自动到高度:75%.

CSS-过渡:

-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;

但它不适用于IE和Firefox.我在谷歌上发现了一些帖子,但无法找到解决方案.

谢谢你的帮助.

我试图复制此导航栏折叠内容(请参见下图)

如您所见,单击汉堡菜单后,导航栏的内容将以全屏显示,而不是向下滑动.有没有我可以用来实现这个的插件或CSS代码片段？谢谢你的帮助.

我正在尝试使用ngAnimate折叠进/出框.我做了类似的事情并且它有效,但我如何摆脱高度属性？拳击可用于扩展(文本中的文本),但随后文本将在边缘出现.

.myTest {
  transition: all linear 0.5s;
  height: 400px; /* I want to get rid this */
}
.ng-hide {
  height: 0;
}



<div class="content myTest" ng-show="show">
      <div class="row">
        <div class="col-md-15">
          <div class="text1">{{text1}}</div>
          <div class="analytic">{{analytic}}</div>
          <div class="text2">{{text2}}</div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-15">
          <div class="label">{{'label'|translate}}</div>
          <div class="text3">{{text3}}</div>
        </div>
      </div>
    </div>

我有以下CSS:

.foo
{
    height:100px;
    overflow:hidden;
    -webkit-transition: height 200ms;
    -moz-transition: height 200ms;
    -o-transition: height 200ms;
    transition: height 200ms;
}

.foo.open
{
    height:auto;
}

当.foo有自动高度时,根据内容的不同,它的高度约为550px.

我open使用jQuery 添加类,我希望使用CSS3过渡在200ms内看到高度从100px变为~550px.

然而,究竟发生的是高度从100px变为0px,然后跳到~550px.

- 观看现场演示 -

如果我不是改.open到height:550px那么这个工作正常,但是内容的长度会有所不同,因此我需要将高度设置为自动,而不是一个固定的像素高度.

为什么div关闭而不是滑动到~550px,我该如何解决这个动画问题呢？