Question

是否可以在iframe中进行淡入和淡出过渡？

Answer 1

通过随时间改变元素的不透明度可以实现淡入或淡出，这是一个非常简单的例子：

var iframe = document.getElementById('iframe');

fadeOut(iframe, 1000);

function fadeOut(el, duration) {

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

    var step = 10 / duration,
        opacity = 1;
    function next() {
        if (opacity <= 0) { return; }
        el.style.opacity = ( opacity -= step );
        setTimeout(next, 10);
    }
    next();
}

虽然jQuery是一个令人难以置信的库，但你对它的使用应该不仅仅是它创造奇特效果的能力。应采用图书馆，其完整性和易用性;并不是因为它恰好提供了你可能想要使用的一个的东西。

Answer 2

你可以用jquery做到这一点！

http://docs.jquery.com/Effects/fadeOut

http://docs.jquery.com/Effects/fadeIn

Answer 3

或许，您可以让CSS为您处理此问题。用很少的javascript来触发效果。

<强> CSS：

#iframe_selector {
  /* initial values for iframe, we'll change them via javascript. */
  opacity: 0;
  /* Note: In out/2016 opacity is on 97.39% of browsers */
  /* Just an extra property to show multiple transitions, not needed for fade effect. */
  height: 0;
  /* Here you can handle a couple of transitions as you wish */
  transition: opacity 2s ease-in-out, height 3s ease-in-out;
  /* Note: Add all prefixes */
}

<强>的Javascript

function toogleIframe(iframe) {
  //Check if is show with opacity property,
  if (iframe.style.opacity == 0) {
    //and set to original values,
    iframe.style.opacity = 1;
    iframe.style.height = '500px';
  } else {
    //or hide it.
    iframe.style.opacity = 0;
    iframe.style.height = '0px';
  }
}

//And now, just use it...
//Examples:
domReady(function() {
  toogleIframe(document.getElementById('iframe_selector'));
});

var button = document.getElementById('my_button');
button.onclick = function() {
  toogleIframe(document.getElementById('iframe_selector'));
};

//Just specify when your iframe needs to be show or not...

只有一件事，也许您只想在展示时加载iframe，为此，只需从HTML中的iframe中删除src，然后使用iframe.src添加javascript。那是我的理由。

Answer 4

您可以使用 onload 属性和 css 动画使 iframe 在加载后淡入

<iframe
    src="..."
    onload="this.style.opacity = '1';"
    style="
        opacity: 0;
        transition-duration: 300ms;
        transition-property: opacity;
        transition-timing-function: ease-in-out;
    "
></iframe>

我们可以在iframe中淡入和淡出吗？

4 个答案: