css - Firefox CSS3过渡无法正常工作

http://jsfiddle.net/Calum/5dqwJ/

CSS：

 textarea {
        height: 20px;
        margin: 20px;
        width: 585px;
        resize: none;
        overflow: hidden;
        vertical-align: top;
        transition: height 3s;
        -webkit-transition: height 3s;
        -moz-transition: height 3s;
        -o-transition: height 3s;
    }

Javascript：

 $(document).ready(function () {

     $("textarea").focus(function (event) {
         if ($(this).val().length === 0) {
             $(this).height(100);
             $(this).css('resize', 'vertical');
             $(this).attr('placeholder', null);
         }
     });


     $("textarea").blur(function (event) {
         if ($(this).val().length === 0) {
             $(this).height(20);
             $(this).attr('placeholder', "Enter comment");
             $(this).css('resize', 'none');
         }
     });

 });

HTML：

<textarea placeholder='Enter comment'></textarea>

在Chrome，IE和Opera中，当您专注于文本区域时，它会随着CSS3过渡而扩展和收缩。

当我对FireFox进行相同操作时，它没有任何动画效果。

有什么想法吗？

谢谢！

最佳答案

如果在textarea上添加required属性，则可以使用:invalid伪类来定位空白的textarea：

textarea {
    height: 100px;
    margin: 20px;
    width: 585px;
    resize: vertical;
    overflow: hidden;
    vertical-align: top;
    -webkit-transition: height .3s;
    -moz-transition: height .3s;
    -o-transition: height .3s;
    transition: height .3s;
}

textarea:invalid{  /* single line*/
    height: 20px;
    resize: none;
}

textarea:focus{
    height: 100px;
    resize: vertical;
}

demo

（如果您不希望周围出现红色边框，请添加box-shadow: none;）