Question

我有一个方块，每次用户单击元素时都会出现。在此块中，有一个嵌入的YouTube视频-iframe。到目前为止，一切都很好，但是当我尝试全屏显示时，它只会一团糟。

这是codepen / jsfiddle，看来SO不允许iframe：

@keyframes blockHelpFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0,40px,0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

@keyframes blockHelpFadeOut {
    0% {
        opacity: 1;
        transform: translate3d(0,0,0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0,40px,0);
    }
}

.block-help-fade {
    animation: 0.75s cubic-bezier(.9,-0.42,.54,.73) 0s blockHelpFadeIn;
    animation-fill-mode: forwards;
}

.block-help-fade-in {
    animation: 0.75s cubic-bezier(.9,-0.42,.54,.73) 0s blockHelpFadeOut;
    animation-fill-mode: forwards;
}

.block-help-template {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 99998;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 24px;
    border-radius: 2px;
    background-color: white;
    -webkit-box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.1);
    animation: 0.75s cubic-bezier(.9,-0.42,.54,.73) 0s blockHelpFadeIn;
    animation-fill-mode: forwards;
    min-width: 320px;
    min-height: 450px;
}

.block-help-top {
    display: flex;
    flex-direction: column;
    flex: 8;
    width: 100%;
}

.block-help-top .text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block-help-title {
    font-family: 'Segoe UI';
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px;
}

.block-help-description {
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: 400;
}

.block-help-video {
    width: 100%;
    height: 100%;
    margin: 12px 0 12px 0;
}

.block-help-video iframe {
    display: block;
    z-index: 99999;
    height: 100%;
    width: 100%;
    animation: unset;
    animation-fill-mode: unset;
}

  <div class="block-help-template ui-widget-content ui-draggable ui-draggable-handle" id="block-header-main-403a">
      <div class="block-help-top">
          <div class="text">
              <h3 class="block-help-title">Header Title</h3>
              <p class="block-help-description">Nice Description</p>
          </div>
          <div class="block-help-video">
              <iframe src="https://www.youtube.com/embed/GuQBopNcve0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
          </div>
      </div>
  </div>

就像我说的，到处都是（在codepen / jsfiddle上，您可以看到它被底部+左侧的白线所困扰）：

但奇怪的是，删除了

animation: 0.75s cubic-bezier(.9,-0.42,.54,.73) 0s blockHelpFadeIn;
animation-fill-mode: forwards;

修复错误。

我什至不知道该问什么，这可能导致什么？

Answer 1

删除animation-fill-mode: forwards;

从developer.mozilla.org

目标将保留由最后一个关键帧设置的计算值执行期间遇到。最后一个关键帧取决于值动画方向和动画迭代次数

当父母的父母上有动画时，为什么我的iframe会出错？

1 个答案: