如何使用 CSS3 更改具有不透明度过渡的图像以响应 onClick 事件？答案

【问题标题】：How can I change image with opacity transition in response to an onClick event using CSS3?如何使用 CSS3 更改具有不透明度过渡的图像以响应 onClick 事件？
【发布时间】：2011-11-09 21:01:43
【问题描述】：

我想在不使用任何 JavaScript 框架的情况下使用 CSS3 更改带有不透明度过渡的图像以响应 onClick 事件。

这是我的代码，它改变了图像但没有不透明度过渡。

#cf img.imgClass { -webkit-transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -o-transition：不透明度 2s 缓入出局； -ms-transition：不透明度 2s 缓入出局；过渡：不透明 2s 缓入出局； }

<_div id="cf"><_img id="imgId" src="%E7%85%A7%E7%89%87/IMG_0290.JPG">

（功能（） { document.getElementsByTagName('img')[0].onclick = function () { 返回函数（）{ var imgSrc = document.getElementById('imgId').src; (imgSrc.indexOf('IMG_0288.JPG') > 0) ? imgSrc = '照片/IMG_0290.JPG' : imgSrc = '照片/IMG_0288.JPG'; document.getElementById('imgId').src = imgSrc; document.getElementById('imgId').className = "imgClass"; } }(); }());

【问题讨论】：

标签： javascript css

【解决方案1】：

通过使用以下 javascript 函数，它可以工作，但是只使用css就可以了吗？

如果是，怎么做？

function fade (id) {
    var dom = document.getElementById(id),
        level =1,
        step = function (){
            var h = level.toString(10);
            dom.style.opacity = h / 10;
            if (level < 10) {
                level += 1;
                setTimeout(step, 100);
            }
        }
    step();
}
fade('cf');

【讨论】：

【解决方案2】：

这个怎么样：

#cf img.imgClass {opacity on css}
#cf img.imgClass:hover {opacity off css}

【讨论】：

我不想在悬停状态下应用事务效果，而是响应 onClick 事件。