Question

我有一个附加了这个css的简单div

.users_to_c{
    height: 500px;
    width:400px;
    background:rgb(0, 0, 0);
    background-image: url("../img/back.jpg");
    position: absolute;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    overflow: hidden;
    -webkit-transition: 5s;
    -moz-transition: 5s;
    -ms-transition: 5s;
    -o-transition: 5s;
    transition: 5s;
    &:hover{
        overflow: auto;
    }
}

悬停部分正在工作，它显示溢出，但它很快就能正常工作。

Answer 1

“溢出”不是可动画的属性。

以下是可动画的属性列表：

CSS animated properties

Answer 2

实际上无法转换overflow属性。此代码适用于initSlider()等

等特性

Answer 3

无法在overflow属性上进行转换。

如需更详细的解答，请阅读以下答案：https://stackoverflow.com/a/27905043/1860540

Answer 4

试试这个，

<div class="wrap">
  <div class="users_to_c">
    Lorem ipsum dolor sit amet, 
  </div>
</div>

和，

.wrap{
    height: 200px;
    width:400px;
    overflow: hidden; 
}
.users_to_c{ 
    width:400px;
    background:rgb(0, 0, 0);
    background-image: url("../img/back.jpg");
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
   color:red;
   padding: 20px;
   box-sizing: border-box;
}

.wrap:hover{
      overflow-y: auto;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease;
  width: 420px;
}

这个想法是，创建一个包装器，我们将通过在滚动条上悬停时提供额外的20px填充来为其设置动画。所以它不包装内部文本。

http://jsbin.com/qivukeb/edit?html,css,output

谢谢！

CSS转换不是溢出

4 个答案: