transition在移动div无效
0
[已解决问题]
解决于 2017-04-11 09:16
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition-property: all;
transition-duration: 2s;
-moz-transition-property: width; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-property: width; /* Safari and Chrome */
-webkit-transition-duration: 2s; /* Safari and Chrome */
-o-transition-property: width; /* Opera */
-o-transition-duration: 2s; /* Opera */
}
div:hover
{
left:30px;
position:relative;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这是w3c上的一个事例，原事例是
div:hover
{
width:30px;
} 可以运行，动画缓慢的变宽
但是当改为height:300px 或者left，top等属性的时候就是一瞬间变化，没有一个过程
新人小白求大牛解答！！
最佳答案
0
width 和 height 一样，都可以，left 和 bottom 是确定位置的，要先定位才可以。
div{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 30px;
transition-property: left;
transition-duration: 5s;
}
div:hover{
left: 100px;
}
奖励园豆：5
问题是还是没有过渡，位置是会变，但是是瞬间变化的。
@Yhspehy: 你把动画时间设置的长点，看看
@_果果: 2s应该够长了，http://www.w3school.com.cn/tiy/t.asp?f=css3_transition，你可以改数据试试
@Yhspehy:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
left: 0;
position:relative;
height:100px;
background:blue;
transition:left 2s;
-moz-transition:left 2s; /* Firefox 4 */
-webkit-transition:left 2s; /* Safari and Chrome */
-o-transition:left 2s; /* Opera */
}
div:hover
{
left:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
你试试运行这段代码
@_果果: 可以的，你试试height
@_果果: 不用了，我知道为什么了0.0，谢谢了
@Yhspehy: 不客气
其他回答(2)
0
transition-property: width; 改成 transition-property: all; 或者对应的需要过渡的属性，每个都要改
我最上面那个就改了，但是不行
0
我自己找到个解决方法，就是用transform:translateY(-10px);代替bottom：10px；这样就会有个过渡。
但是还是不懂为什么width可以height，left，bottom等不行
