Question

我在使用css3过渡时遇到问题我怎样才能使转换顺利出现呢当我将鼠标悬停在它上面时，我想让div框慢慢改变它的高度

HTML代码

<div id="imgs">

<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" />

</div>

jsfiddle

Answer 1

我相信你需要设置一个指定的高度而不是auto。 http://jsfiddle.net/BN4Ny/这可以顺利扩展。不知道你是否想要那个小小的开放效果。我只是分叉你的jsfiddle并添加了一个指定的高度。

Answer 2

此解决方案不需要javascript或存在需要用手将容器的高度固定为固定的问题。

这可以通过使用max-height属性并将其值设置为较高的值来实现。

#imgs {
    border:1px solid #000;
    border-radius:3px;
    max-height:20px;
    width:100%;
    overflow:hidden;
    transition: 2s ease;
}
#imgs:hover {
    max-height:15em;
}

<div id="imgs">

  <img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" />
</div>

Answer 3

以下是如何做到的：http://jsfiddle.net/minitech/hTzt4/

为了保持灵活的高度，不幸的是，JavaScript是必需的。

Answer 4

不是在容器上使用设置高度或使用JS（这两者都是笨拙的解决方案）......您可以将图像放在列表项中并在li上进行转换。

如果所有图像都达到相似的高度，则意味着容器内的内容仍然是动态的。例如......

/*
CLOSED
*/

div.container li 

{  height:0px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

/*
OPEN
*/

div.container:hover li 

{  height:30px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

Answer 5

好吧，我正在使用这种方法：使用最大高度来过渡高度而不是直接使用高度... 例如：

library(dplyr)
library(stringr)
data %>%
  mutate(across(contains(".f"),
                ~ ./(. + get(str_replace(cur_column(),".f",".uf"))),
                .names = "fillrate_{.col}"))
#  Location Job1.f Job2.f Job3.f Total.f Job2.uf Job1.uf Job3.uf Total.uf fillrate_Job1.f fillrate_Job2.f fillrate_Job3.f fillrate_Total.f
#1        A      1      2      3       6       0       1       1        2             0.5       1.0000000       0.7500000        0.7500000
#2        B      4      5      6       7       1       4       1        6             0.5       0.8333333       0.8571429        0.5384615

css3高度过渡不起作用

5 个答案: