javascript - Javascript 图像交换上的 CSS 过渡

Question

我有一组图像可以与 Javascript 中的另一组图像交换，但是当它在两个图像之间捕捉时看起来很难看。我想让它们褪色，我已经设法用 CSS 中的网页背景做到了这一点。问题是，我无法让它处理图像，我也不确定为什么。

这是在图像之间切换的脚本:

    function change_img()
{
    document.images.logo.src = "Images/logo(w).png";
    document.images.about.src = "Images/About50(w).png";
    document.images.projects.src = "Images/Projects50(w).png";
    document.images.contact.src = "Images/Contact50(w).png";
}

function change_back()
{
    document.images.logo.src = "Images/logo.png";
    document.images.about.src = "Images/About50.png";
    document.images.projects.src = "Images/Projects50(2).png";
    document.images.contact.src = "Images/Contact50.png";
}

那是在文档的头部。 然后我们有一个要交换的图像示例:

<center><img class="transition" name="logo" src="Images/logo.png" height="300" style="z-index:1"></center>

这是由其他图像之一上的鼠标悬停事件激活的。一共有四个要改。 最后，我认为会触发转换的 CSS:

.transition{-webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;}

很简单，我将过渡规则固定在单个 CSS 规则中，并将其归因于每个图像。我是否以某种方式错误地链接了它？我不明白为什么这不起作用..

Answer 1

CSS 可以“中转”的是 CSS 属性，而不是像 src 这样的元素属性。

您应该做的是在 DOM 中有两张图片，一张用于当前图片，一张用于新图片，并使后者淡入前者。

像这样:

function change_img() {
    var img = document.getElementsByName("logo")[0],
        newImg = new Image();
    newImg.name = "logo";
    newImg.src = "Images/logo.png";
    img.parentNode.insertBefore(newImg, img.nextSibling);
    newImg.className = "transition";
    setTimeout(function() {img.parentNode.removeChild(img);}, 500);
    ...
}

这是 CSS 部分:

[name="logo"] + img {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.transition {opacity: 1;}