Firefox CSS3过渡不起作用

时间:2013-02-06 16:44:31

标签: css firefox css3 transition

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中,当您专注于textarea时,它会扩展并收缩CSS3过渡。

当我对FireFox执行相同操作时,它不会为任何内容制作动画。

任何想法为什么?

谢谢!

4 个答案:

答案 0 :(得分:3)

请参阅此页面了解转换

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

你可以通过css完全完成,不需要使用js

删除 $(this).height(20); $(this).height(100); 来自JS并将此添加到css

textarea:focus{
   height: 100px;    
}

答案 1 :(得分:2)

好吧, - &gt; http://jsfiddle.net/FSEqT/

textarea:focus {
height: 300px;
margin: 20px;
width: 585px;
resize: none;
overflow: hidden;
vertical-align: top;
}

textarea {
height: 200px;
margin: 20px;
width: 585px;

transition: height 3s;
-webkit-transition: height 3s;
-moz-transition: height 3s;
-o-transition: height 3s;
}

答案 2 :(得分:2)

如果在textarea上添加required属性,则可以使用:invalid伪类来定位空文本区:

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;

答案 3 :(得分:1)

您的代码中没有css转换。但如果你想要它,下面的东西应该有用。只需将其添加到textarea {...}下方。

textarea:hover {
  height: 100px;
}