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

【问题标题】：size transition on resizable textarea可调整大小的文本区域上的大小转换
【发布时间】：2014-06-06 12:49:33
【问题描述】：

我已经实现了我的 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 保持打开状态（没有大小变化）。

我尝试添加！important，resp：宽度：0px！重要；高度：0px！重要； …… 宽度：350px！重要；高度：100px！重要；但是，现在该区域不再可调整大小（即使使用 resize:both）。

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

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

jsFiddle

【问题讨论】：

你能创建一个演示吗？
store.amniverse.net/test.htm - 尝试调整文本区域的大小然后将鼠标悬停在外面
store.amniverse.net/test2.htm - textarea 无法调整大小，尽管调整大小控件可见
我错过了什么吗？我从未见过像您的.transition 和.box-sizing 这样的规则？ CSS resize 属性什么都不做，除非溢出属性不是可见的，这是大多数元素的默认值。所以通常要使用它，你必须设置类似overflow: scroll;...根据css-tricks
啊，刚刚注意到“我的 LESS”。

标签： css resize textarea less css-transitions

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

【讨论】：