opacity transition 过渡无法实现

.main .content .foot .works .item img{
    width:102px;
    height:102px;
    border-radius:50%;
    opacity:0;
    filter:alpha(opacity=0);
    transition:all 0.5s linear;
    -webkit-transition:all 0.5s linear;
    -ms-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
}

var img=works.getElementsByTagName("img");
for(var i=0;i<img.length;i++){
    img[i].style.cssText="opacity:1;filter:alpha(opacity=100);";
}

为什么没有办法实现图片的透明度过渡,而是直接显示了出来。

阅读 6.9k
4 个回答

你这个并没有一个事件触发,页面渲染程序读到那时已经将代码执行了,opacity已经为1了,当然看不到过渡效果了

动画是需要触发的,直接设置的动画,在元素加载完成的时候就开始动了。

想要控制动画,一般有三种方法:

1、用WOW等js插件,当元素出现在可视范围的时候触发。

2、用:hover伪类设置动画

3、用js事件

你这可以把设置放到图片的load里嘛,等加载完成后再触发。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题