Firefox CSS3 transition won't work
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>
In Chrome, IE, and Opera, when you focus on a textarea, it expands and contracts with a CSS3 transition.
When I do the same with FireFox it doesn't animate anything.
Any ideas why?
Thank!
source to share
If you add an attribute required
to a textarea, you can use the class pseudo-class :invalid
to target an empty 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;
}
(add box-shadow: none;
if you don't want a red border around it)
source to share
see this page for transitions
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
and you can do it completely with css, no need to use js
remove $ (this) .height (20); and $ (this) .height (100); From JS and ADD to css
textarea:focus{
height: 100px;
}
source to share
Well, -> 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;
}
source to share