Question

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

我的LESS：

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

我想保留textarea的resize选项，但问题是当我调整textarea的大小时，它会覆盖css给出的大小，当我将鼠标悬停时，textarea仍保持打开状态（没有更改大小）。 / p>

我试图添加！important，resp：宽度：0px！重要; 身高：0px！重要; .... 宽度：350px！重要; 身高：100px！重要; 但是，现在该区域不再可调整大小（即使调整大小：两者都有）。

它发生在Firefox 29.0中，我没有测试过其他浏览器，但我期待类似的问题。

是否有纯CSS3解决方案，还是我必须使用javascript进行此类动画？提前谢谢。

jsFiddle

Answer 1

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

将正常状态的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;
}

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

1 个答案: