使用 JavaScript 淡入 iframe

Posted 2023-05-09

【中文标题】使用 JavaScript 淡入 iframe

【英文标题】：Fading in iframe using JavaScript

【发布时间】：2021-08-01 20:32:54

【问题描述】：

我正在尝试使用 javascript 平滑地淡入我的 iframe。我在网上看到过链接，大部分答案都与 jQuery 有关。为什么我必须使用 jQuery 进行简单的淡入淡出？谁能解释一下？

我也不介意使用 JQuery，毕竟它是 javascript 的一部分。我只是在寻找一个简单的解决方案。由于我使用的是下面的fadeIn()函数，jQuery的性能是否比下面的函数好？

 <iframe id="iframe" style="
            position: fixed;
            opacity: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            z-index: 10;
            display: none;
          ">
    </iframe>

<script>
//Creation of button before this code

button_01.onPointerUpObservable.add(function () 
                let iframe = document.getElementById("iframe");
                iframe.src = "LINK";
                fadeIn(iframe, 2000);
                iframe.style.display = 'Block';
            );

function fadeIn(el, duration) 

            /*
             * @param el - The element to be faded out.
             * @param duration - Animation duration in milliseconds.
             */

            var step = 10 / duration;
            var opacity = 0;
            function next() 
                if (opacity >= 1)  return; 
                el.style.opacity = (opacity += step);
                setTimeout(next, 10);
            
            next();
        
</script>

【问题讨论】：

首先，jQuery 是 JavaScript。其次，您不必为任何事情使用 jQuery。您只需要了解 jQuery 是如何做到的，并编写该代码。我会免费告诉你一件事；如果您使用样式表而不是内联样式，这会容易得多...

例如How to make fadeOut effect with pure JavaScript

【参考方案1】：

有些人建议使用 jQuery，因为有一个名为 x.fadeIn(300) 的函数可以使其动画效果非常好，您实际上并不需要它，它可以通过添加一个类或使用原版动画并稍后删除它来完成 两者：

选项 1：类

.shown 
    opacity: 1;


iframe 
    transition: .3s opacity;

iframe.classList.add('shown');

选项 2：仅 JS

iframe.style.transition = '.3s';
iframe.style.opacity = '1';
// remove it after it's done
setTimeout(() => 
    iframe.style.transition = '';
, 300);