Question

我创建了这个小函数作为图像滚动器的一部分所有它的意思是在下一张图片加载之前将图像的大小减小到0px宽度并且增长部分工作正常但是这不会。（我我也试过了几种变体）

function shrinkimage()
{
    var image = document.getElementById('test');    

        image.style.display = "block";
        image.style.styleFloat = "left";
        image.style.width = "1024px";
        image.style.transition = "width 0.5s ease 0s";
        image.style.width = "0px";
    }

当我希望它缩小到左侧时，图像就会消失任何帮助将非常感激。如果它有助于下一件事发生，那么图像src会发生变化

function rotate(imageNumber) {
           var myimage = new Array;
        //Modify these variables as needed
        //vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv            
        myimage.push("data/images/borderlands.jpg");
        myimage.push("data/images/creed.jpg"); 
        myimage.push("data/images/darksouls.jpg");
        myimage.push("data/images/fable.jpg");
        myimage.push("data/images/fallout.jpg");
        myimage.push("data/images/gears.jpg");
        myimage.push("data/images/halo.jpg");


        var time = 5000; //5000 milliseconds = 5 seconds            
        //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

        var image = document.getElementById('rotator');

        if (imageNumber < myimage.length) {

            shrinkimage();
            hideimage();


            setTimeout(function () {image.src = myimage[imageNumber];}, 500);



            growimage(); 

            imageNumber++;
        }
        else {
            imageNumber = 0;

            shrinkimage();
            hideimage();

            image.src = myimage[imageNumber];

            growimage();

            imageNumber++;
        }
        var t = setTimeout("rotate(" + imageNumber + ")", time);
    }



function shrinkimage()
{
var image =document.getElementById('rotator');
    image.style.styleFloat = "left";
    image.style.width = "1024px";
    image.style.transition = "width 0.5s ease 0s";
    image.style.width = "0px";

}

function hideimage()
{
var image =document.getElementById('rotator');
{
    image.style.display = "none";
}

function growimage()
{
 var image =document.getElementById('rotator');
        image.style.display = "block";
        image.style.width = "0px";
        image.style.styleFloat = "right";
        image.style.transition = "width 0.5s ease 0s";
        image.style.width = "1024px";

}

.slider {
    border: 0px;
    width: 1024px;
    height: 400px;
    transition:  width 0.5s ease 0s;
    -mox-transition:  width 0.5s ease 0s;
    -webkit-transition:  width 0.5s ease 0s;
    -o-transition:  width 0.5s ease 0s;
    -ms-transition:  width 0.5s ease 0s;
    overflow: hidden;
}

#slider_box{
    width:1024px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000000;
    border: 5px #000000 solid;
}

如果你无法看到我正在尝试做什么，图像旋转器将旧图像缩小到左边并将新图像向左增长。成长部分工作得很漂亮但收缩不会

Answer 1

使用css中的转换初始化图像

#test {
    transition: width 0.5s ease 0s;
}

然后在函数中只需更改style.width

function shrinkimage() {
    var image = document.getElementById('test');
    image.style.width = '0px';
}

Answer 2

如果在转换完成之前源发生了变化，那么您将遇到这个问题，就像将css设置为display: none时转换不起作用的方式一样。转换完成后，请确保图像源发生更改。例如，您可以使用以下内容：

setTimeout(function () {
    image.src = 'path/to/newSource.png';
  }, 500);

style.transition.width 0px使图像消失

2 个答案: