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

Question

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

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

#cf img.imgClass {    -webkit-transition: opacity 2s ease-in-out;    -moz-transition: opacity 2s ease-in-out;    -o-transition: opacity 2s ease-in-out;    -ms-transition: opacity 2s ease-in-out;    transition: opacity 2s ease-in-out;}

<_div id="cf"> <_img id='imgId' src='photos/IMG_0290.JPG'>

(function ( ) {    document.getElementsByTagName('img')[0].onclick = function () {        return function () {            var imgSrc = document.getElementById('imgId').src;            (imgSrc.indexOf('IMG_0288.JPG') > 0) ? imgSrc = 'photos/IMG_0290.JPG' : imgSrc = 'photos/IMG_0288.JPG';             document.getElementById('imgId').src = imgSrc;            document.getElementById('imgId').className = "imgClass";        }    }();}());

Answer 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');