Javascript 图像交换上的 CSS 过渡答案

【问题标题】：CSS transition on a Javascript image swapJavascript 图像交换上的 CSS 过渡
【发布时间】：2013-06-18 10:46:11
【问题描述】：

我有一组图像可以在 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 规则中，并将其归因于每个图像。我是否以某种方式错误地链接了它？我不明白为什么这不起作用..

【问题讨论】：

标签： javascript html css image transitions

【解决方案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;}

【讨论】：

知道我可以在哪里链接过渡以使其正常工作吗？就像我说的那样，我使用了一种非常相似的技术来使用相同的鼠标悬停事件来更改页面的背景颜色..
@TomSykes 我马上更新我的答案。我还没说完。
我已经把代码放进去，但它不喜欢它......徽标没有褪色，但由于某种原因它现在看起来比它应该的大得多：/跨度>

【解决方案2】：

我已经设法用 CSS 中的网页背景做到了这一点

只有 webkit 浏览器支持背景渐变过渡。所以如果你想使用它继续使用背景。假设要交换的徽标是 2 并且它们的大小相等.. 例如 100 像素：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>talk</title>
<style>
#logo{
 width:100px;
 height:100px;
 -webkit-transition: background-image 1s ease-in-out;
 background-image:url("logo1.png");
}
#logo.anotherLogo {
 background-image:url("logo2.png");
}
</style>
<script>
var swap=function(){
 document.getElementById('logo').classList.toggle('anotherLogo');
}
window.onload=function(){
 document.getElementsByTagName('button')[0].addEventListener('click',swap,false);
}
</script>
</head>
<body>
<div id="logo"></div>
<button>swap logo</button>
</body>
</html>

解决方案 2，这个支持更多（适用于大多数现代浏览器，而不仅仅是 webkit 浏览器）

这需要一个 div 中的 2 个图像，并在 css 中使用绝对值，你可以看到更多 css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
<style>
#logo{
 width:128px;
 height:128px;
}
#logo>img{
 position:absolute;
 width:128px;
 height:128px;
 -webkit-transition:opacity 1s ease-in-out;
}

#logo>img:nth-child(2){
 opacity:0;
}
#logo.anotherLogo>img:nth-child(2){
 opacity:1;
}
#logo.anotherLogo>img:nth-child(1){
 opacity:0;
}
</style>
<script>
var swap=function(){
document.getElementById('logo').classList.toggle('anotherLogo');
}
window.onload=function(){
document.getElementsByTagName('button')[0].addEventListener('click',swap,false);
}
</script>
</head>
<body>
<div id="logo">
<img src="logo1.png"/>
<img src="logo2.png"/>
</div>
<button>swap logo</button>
</body>
</html>

解决方案 3

在这种情况下，div 容器具有其中一个徽标的背景和内部图像。它也具有与您的<center><img/></center> 相同的结构，并且可能会以较少的修改替换您现有的代码。但是标签“center”是一个旧标签，不应该在现代网站中使用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
<style>
#logo{
 width:128px;
 height:128px;
 background-image:url(logo2.png);
}
#logo>img{
 width:128px;
 height:128px;
 -webkit-transition:opacity 1s ease-in-out;
}
#logo.anotherLogo>img{
 opacity:0;
}
</style>
<script>
var swap=function(){
document.getElementById('logo').classList.toggle('anotherLogo');
}
window.onload=function(){
document.getElementsByTagName('button')[0].addEventListener('click',swap,false);
}
</script>
</head>
<body>
<div id="logo">
<img src="logo1.png"/>
</div>
<button>swap logo</button>
</body>
</html>

*ifu 想要一个特定大小的背景图片，你可以使用 background-size css

background-size:contain;

包含调整图像大小，使完整图像在您的 div 中

封面填满你的容器

或者你也可以使用宽度和高度

background-size:100px 100px;

如果您需要更多关于您的多重交换功能的帮助...请询问。

【讨论】：