CSS过渡没有溢出[关闭]答案

【问题标题】：CSS transition not with overflow [closed]CSS过渡没有溢出[关闭]
【发布时间】：2016-07-28 01:29:04
【问题描述】：

我有一个简单的 div，上面附有这个 css

.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;
    }
}

悬停部分正在工作它显示溢出，但它可以迅速工作。

【问题讨论】：

问题是什么？？？
@VincentRodomista 更多问题。过渡不起作用

标签： html less

【解决方案1】：

“溢出”不是动画属性。

这里是动画属性的列表：

CSS animated properties

【讨论】：

哦，好的，谢谢！但你知道我怎样才能像 facebook 那样为它制作动画吗？
您指的是 Facebook 的哪个功能？
在聊天中，当您将鼠标悬停在左侧 div 时，它会为滚动条提供动画
它们没有使用在使用 CSS“溢出”属性时出现的默认滚动条。看起来他们正在使用自定义滚动条，通过使用“不透明度”属性来动画自己出现/消失。
好的，谢谢！我会看看我能做什么

【解决方案2】：

实际上无法转换溢出属性。此代码适用于 background: red 等质量。

【讨论】：

【解决方案3】：

没有选项可以在 overflow 属性上进行转换。

更详细的答案，请阅读这个答案：https://stackoverflow.com/a/27905043/1860540

【讨论】：

【解决方案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;
}

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

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

谢谢！

【讨论】：