可调整大小的文本区域上的大小转换

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给定的大小，当我悬停在外时，文本区域保持打开状态(没有大小更改(。

我试着补充！重要，分别：宽度：0px！重要的高度：0px！重要的。。。。宽度：350px！重要的高度：100px！重要的但是，现在该区域不再可调整大小(即使使用了resize：both(。

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

有没有一个纯粹的CSS3解决方案，或者我必须使用javascript来制作这样的动画？提前谢谢。

jsFiddle

Answer 1

我认为您的问题的可能解决方案已在https://stackoverflow.com/a/23618098/1596547.

对于正常状态，将max-height和max-width属性设置为零，对于悬停状态，将其设置为大值。

您的Less代码：

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