使用 CSS 在幻灯片中淡化照片

【问题标题】：Fading photos in slideshow using CSS使用 CSS 在幻灯片中淡化照片
【发布时间】：2012-05-27 10:41:48
【问题描述】：

我有一个网站，主页上有图片幻灯片。在删除一张照片之前，我会在它后面写下一张照片，然后将其删除。我想知道如何在照片被删除之前添加褪色效果。我的网站是：guyzyl.org，所以你可以看看我在说什么。另外我不知道如何使用 Jquery，所以请不要提供该解决方案。谢谢你的帮助。盖伊 Z。

【问题讨论】：

我认为你不应该不尝试就放弃 jquery。看这个网站上的例子，它很容易实现和跨浏览器支持（因为 Derek 没有涵盖 IE 的缺点，耻辱他们不是他）mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example

标签： javascript css animation slideshow fading

【解决方案1】：

.photo{
    -webkit-transition: opacity .5s ease-in-out;  /*Webkit*/
    -moz-transition: opacity .5s ease-in-out;  /*Firefox*/
    -o-transition: opacity .5s ease-in-out;  /*Opera*/
    transition: opacity .5s ease-in-out;  /*CSS3 Standard*/
    opacity: 1;
}
.photo.fade{
    opacity: 0;
}

document.querySelector(".photo").classList.add("fade");

查看演示：http://jsfiddle.net/DerekL/jzLZZ/

【讨论】：

但我希望它在删除之前褪色，而不是在写入时，所以我可以在使用 javascript 删除之前编辑照片样式吗？
@guyzyl - 如果符合您的预期，请查看演示。
你在 IE 中测试过这个吗？似乎不适用于 7、8 或 9
你能帮我在我的网站 (guyzyl.org) 中实现这个吗？
@guyzyl - 我推荐你使用 jQuery，因为它易于使用，最重要的是 - 支持跨浏览器。