首页 新闻 搜索 专区 学院

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等属性的时候就是一瞬间变化,没有一个过程

新人小白求大牛解答!!

Yhspehy的主页 Yhspehy | 菜鸟二级 | 园豆:232
提问于:2016-11-23 22:12
< >
分享
最佳答案
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
_果果 | 初学一级 |园豆:186 | 2017-01-04 17:27

问题是还是没有过渡,位置是会变,但是是瞬间变化的。

Yhspehy | 园豆:232 (菜鸟二级) | 2017-04-10 17:33

@Yhspehy: 你把动画时间设置的长点,看看

_果果 | 园豆:186 (初学一级) | 2017-04-11 09:05

@_果果: 2s应该够长了,http://www.w3school.com.cn/tiy/t.asp?f=css3_transition,你可以改数据试试

Yhspehy | 园豆:232 (菜鸟二级) | 2017-04-11 09:06

@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>

 

 

你试试运行这段代码

_果果 | 园豆:186 (初学一级) | 2017-04-11 09:10

@_果果: 可以的,你试试height

Yhspehy | 园豆:232 (菜鸟二级) | 2017-04-11 09:15

@_果果: 不用了,我知道为什么了0.0,谢谢了

Yhspehy | 园豆:232 (菜鸟二级) | 2017-04-11 09:16

@Yhspehy: 不客气

_果果 | 园豆:186 (初学一级) | 2017-04-11 09:16
其他回答(2)
0

transition-property: width; 改成 transition-property: all; 或者对应的需要过渡的属性,每个都要改

by.Genesis | 园豆:2386 (老鸟四级) | 2016-11-24 11:43

我最上面那个就改了,但是不行

支持(0) 反对(0) Yhspehy | 园豆:232 (菜鸟二级) | 2016-11-24 12:00
0

我自己找到个解决方法,就是用transform:translateY(-10px);代替bottom:10px;这样就会有个过渡。

但是还是不懂为什么width可以height,left,bottom等不行

Yhspehy | 园豆:232 (菜鸟二级) | 2016-11-24 12:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册