如何在没有 jquery 的情况下向此代码添加淡入淡出过渡

【问题标题】：How to add a fade in and out transition to this code without jquery如何在没有 jquery 的情况下向此代码添加淡入淡出过渡
【发布时间】：2016-06-10 00:43:37
【问题描述】：

它是一个相当基本的使用 css 和 javascript 的 html 幻灯片的代码。这是javascript部分我如何在没有jquery的情况下添加淡入淡出到这段代码

<script type="text/javascript">
    var step = 0
    var whichimage = 0

    function slideit() {

        if (!document.images)
            return
        document.getElementById('slide').src = slideimages[step].src
        whichimage = step
        if (step < 3)
            step++
        else
            step = 0

        setTimeout("slideit()", 5000)
    }

    slideit()
</script>

【问题讨论】：

HTML、JavaScript 和 CSS 是否适合您？试试这个：stackoverflow.com/a/20264468/5955503
仅供参考，如果您不需要在其他任何地方调用 slideIt，您可以只使用匿名函数和 setInterval。这将具有从全局命名空间隐藏变量和函数的额外好处。 setInterval(function () { ... }, 5000);

标签： javascript html css

【解决方案1】：

最简单的方法是使用 CSS 动画元素不透明度：

var el = document.getElementById('e');
setInterval(function(){
  el.className = el.className == '' ? 'show' : '';
}, 2000);

#e {display: inline-block; width: 50px; height: 50px; background: #afa; opacity: 0; transition: opacity 1s linear}
#e.show {opacity: 1}

&lt;div id="e"&gt;&lt;/div&gt;

在您的情况下，您必须使用 setTimeouts 设置前一个元素何时淡出以及新元素何时淡入。我可以给你写一个更准确的代码，但不能没有看到标记/整个事情。这应该足以让您入门。

【讨论】：

嗯。我还不太懂 javascript，请问您能指导我在哪里介绍这部分代码吗？
JavaScript 只在一个区间内切换类名，没有别的。寻找三元运算符，但和：if (el.className == '') el.className = 'show'; else el.className = '';