Question

我刚刚创建了一个文本窗口，如果你hover覆盖它就会变得更大（transition会增加更多height）。它基本上是＆＃34; drop＆＃34;向下到底并推开其他文字。我有什么方法可以做到这一点＆＃34; drop＆＃34;到底部50％并且＆＃34;攀登＆＃34;增加50％？

＆＃13;

#tcontent {
  float: left;
  background-color: yellow;
  height: 150px;
  width: 100%;
  margin-top: 100px;
}
#mcontent {
  float: left;
  background-color: blue;
  height: 30px;
  width: 100%;
  height: 150px;
  transition: height 0.5s ease;
}
#bcontent {
  float: left;
  background-color: green;
  height: 30px;
  width: 100%;
  height: 150px;
}
#mcontent:hover {
  float: left;
  background-color: blue;
  height: 30px;
  width: 100%;
  height: 250px;
}

＆＃13;

<div id="main">
  <div id="tcontent">
  </div>
  <div id="mcontent">
  </div>
  <div id="bcontent">
  </div>
</div>

＆＃13;

Answer 1

通过传统方式这很尴尬，因为内容从左到右，从上到下流动，android:marqueeRepeatLimit="marquee_forever" android:ellipsize="none" android:maxLines="100" android:scrollHorizontally="false"需要空间进入上面。但是，这可以通过使用#mcontent来实现。

使用flexbox添加#main以让其子级使用display: flex;模型
将flexbox添加到flex-direction: column;以使子项从上到下排序
将#main添加到height: 550px;，使其与#main展开时的三个孩子一样高
将#mcontent添加到justify-content: center;以将孩子置于中间位置

背后的原理是元素设置为始终位于#main的中间。当#main增长时，它会向上推#mcontent和#tcontent因为它们有空间可以移动。当它们被设置为居中时#bcontent将保持在中间位置。

#mcontent

#main {
  display: flex;
  flex-direction: column;
  height: 550px;
  justify-content: center;
}
#tcontent {
  background-color: yellow;
  height: 150px;
  width: 100%;
}
#mcontent {
  background-color: blue;
  height: 150px;
  transition: height 0.5s ease;
  width: 100%;
}
#mcontent:hover {
  height: 250px;
}
#bcontent {
  background-color: green;
  height: 150px;
  width: 100%;
}

Answer 2

div推动和向下移动的原因是CSS height的默认行为是将高度增加到底部。您可以使用新的CSS3功能：转换。确切地说，是scale()函数。

CSS：

将这些行添加到您的样式中

#mcontent {
  transition: all 0.5s ease;
}

#mcontent:hover {
  -ms-transform: scale(1, 1.2);
  -webkit-transform: scale(1, 1.2);
  transform: scale(1, 1.2);
  height: 185px;
}

此外，在您的样式表中，您可以在一个块中同时使用多个height属性。这不是一个好习惯，请尝试清理它们。

#mcontent {
  height: 30px; /* this line is not necessary */
  height: 150px; /* as this line overrides the first one */
}

Answer 3

请看我的小提琴here。

我使用了margin-top: -50px;并为边距设置了动画。顶部扩展的使用余量，让底部扩展仍然使div低于幻灯片。

已编辑的CSS

#mcontent {
    float: left;
    background-color: blue;
    height: 30px;
    width: 100%;
    height: 150px;
    transition: height 0.5s ease, margin-top 0.5s ease;
}

#mcontent:hover {
    height: 250px;
    margin-top: -50px;
}

Answer 4

使用代码段中显示的transform: scale(1,2);。

在您的CSS中，您多次设置height，请尽量避免这种情况。同样在:hover声明中，您只需指定更改的参数。所以在这种情况下只有transform。

#tcontent {
  float: left;
  background-color: yellow;
  height: 150px;
  width: 100%;
  margin-top: 100px;
}
#mcontent {
  float: left;
  background-color: blue;
  width: 100%;
  height: 150px;
  transition: all 0.5s ease;
}
#bcontent {
  float: left;
  background-color: green;
  width: 100%;
  height: 150px;
}
#mcontent:hover {
  transform: scale(1,2)
}

<div id="main">
  <div id="tcontent">
  </div>
  <div id="mcontent">
  </div>
  <div id="bcontent">
  </div>
</div>

Answer 5

如果您可以在将鼠标悬停在#main而不仅仅是#mcontent时允许效果发生，则效果非常好：

#main > div {
    transition: all 0.5s ease;
}

#tcontent {
    float: left;
    background-color: yellow;
    height: 150px;
    width: 100%;
    margin-top: 100px;
}
#mcontent {
    float: left;
    background-color: blue;
    height: 30px;
    width: 100%;
    height: 150px;
    /* new */
    position: relative;
}
#bcontent {
    float: left;
    background-color: green;
    height: 30px;
    width: 100%;
    height: 150px;
    transition: all 0.5s ease;
}

#main:hover #mcontent {
    height: 250px;
    margin-top: -50px;
}

#main:hover #tcontent {
    transform: translateY(-50px);
}

Fiddle demo here.

过渡高度，增大到2边

5 个答案:

CSS：