可调整大小的文本区域上的大小过渡

Question

我已经实现了我的文本区域，它在悬停在其主元素上时显示/隐藏过渡动画：

我的更少：

.my-hidden-textarea textarea{
    width:0px;
    height:0px;
    resize: none;
    .transition(~"width 0.3s, height 0.3s, left 0.3s");
    .box-sizing(border-box);
}
.my-hidden-textarea:hover textarea{
    left:-338px;
    width:350px;
    height:100px;
}

我想保留文本区域的调整大小选项，但问题是，当我调整文本区域的大小时，它会覆盖 css 给出的大小，并且当我将鼠标悬停时，文本区域保持打开状态（没有大小变化）。

我尝试添加 !important, resp: width:0px !important; 高度：0px！重要；....宽度：350px！重要；高度：100px！重要；但是，现在该区域无法再调整大小（即使使用调整大小：两者）。

它发生在 Firefox 29.0 中，我没有测试过其他浏览器，但我预计也会出现类似的问题。

是否有纯 CSS3 解决方案，或者我是否必须使用 javascript 来实现此类动画？提前致谢。

jsFiddle

Answer 1

我认为/sf/answers/1653266891/已经给出了您的问题的可能解决方案。

将max-height和max-width属性设置为零（对于正常状态）和较大的值（对于悬停状态）。

您的更少代码：

@import "./mixins/vendor-prefixes.less"; //from Bootstrap 3 
.my-hidden-textarea
{
    textarea {
        width:0px;
        height:0px;
        max-height: 0px;
        max-width: 0px;
        .transition(~"width 0.3s, height 0.3s, left 0.3s");
        .box-sizing(border-box);
    }
    &:hover textarea {
        left:-338px;
        width:350px;
        height:100px;
        max-height: 30em;
        max-width: 300em;
        resize: both;
    }
}

前面的 Less 代码将编译成以下 CSS 代码：

.my-hidden-textarea textarea {
  width: 0px;
  height: 0px;
  max-height: 0px;
  max-width: 0px;
  -webkit-transition: width 0.3s, height 0.3s, left 0.3s;
  -o-transition: width 0.3s, height 0.3s, left 0.3s;
  transition: width 0.3s, height 0.3s, left 0.3s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.my-hidden-textarea:hover textarea {
  left: -338px;
  width: 350px;
  height: 100px;
  max-height: 30em;
  max-width: 300em;
  resize: both;
}