我有一个包含一些文本的百分比宽度的html表。我的ajax函数将此内容更改为另一个具有不同长度的文本,但td
宽度将在ajax响应后直接重新调整大小。如何将css3
过渡属性应用于列宽以进行软和动画列重新调整大小?
我的css代码:
table tr td{
color: #00cf00;
padding: 2%;
font-family: "Courier New";
font-size: 16px;
line-height: 3;
transition: width 1s;
}
答案 0 :(得分:0)
我认为您应该添加所有浏览器前缀以使其正常工作:
-webkit-transition: width 1s;
-moz-transition: width 1s;
-ms-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
答案 1 :(得分:0)
您还可以通过jquery进行动画处理。这很容易。以下代码可以顺畅地更改列大小。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("table tr td").animate({width:"100px"},2000);
$("table tr td").animate({height:'100px'},1000);
});
</script>
</head>
<body>
<div>
<table >
<tr><td style="background:red; width:200px;height:200px;text-align:center">Ammad</td><td style="text-align:center;background:green; width:200px;height:200px;" >Umair</td></tr>
</table>
</body>
</html>