Question

我想使用CSS转换为视频动画，以使其显示在页面上，但是我希望视频在进行动画处理时将内容下推，而不是默认情况下视频空间已经存在于用户界面。

我创建了一个jsfiddle来显示我的意思：https://jsfiddle.net/njpatten/198sh5ec/2/

出于性能原因，我更喜欢仅变换元素，但我也尝试过修改高度以获得所需的效果，但是结果有点跳跃，并且也不如我所愿。 >

.video {
    transform-origin: 0 0;
    transform: scale(0, 0);
    transition: 0.2s;
    height: 0;
    &.open {
        transform: scale(1, 1);
        height: 100%;
    }
}

我是否缺少可以解决此问题的“黑客”？尝试在元素中进行动画处理的同时，动画师如何处理元素占用的空间，同时仍使事物保持高性能（因此仅对变换和不透明度进行动画处理）。

谢谢！

Answer 1

不幸的是，变换不会削减它。它不会影响文档的布局，而这正是您要向下推文本副本所要实现的目标。就是说，我将通过首先使iframe容器根据宽高比设置其自己的尺寸来解决此问题。您的视频尺寸为560x315，其百分比是宽度的56.25％。之所以需要该百分比，是因为它可以与"padding trick"一起使用，以获取根据纵横比缩放的元素。因此，第一部分是根据宽高比制作视频容器：

.video {
  position: relative;
  max-width: 560px;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &:after {
    content: '';
    display: block;
    padding-top: 56.25%;
  }
}

您会注意到，您现在可以设置.video的宽度，并且它对于视频始终具有正确的高度。接下来，我们需要添加过渡。我们将过渡padding-top属性。

.video {
  position: relative;
  max-width: 560px;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &:after {
    content: '';
    display: block;
    padding-top: 0%;
    transition: padding 0.2s;
  }

  &.open:after {
    padding-top: 56.25%;
  }
}

最后，您可以向视频添加过渡效果，以使其放大而不是像阴影一样打开：

.video {
  position: relative;
  max-width: 560px;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.2s;
    transform-origin: 0 0;
    transform: scale(0,0);
  }

  &:after {
    content: '';
    display: block;
    padding-top: 0%;
    transition: padding 0.2s;
  }

  &.open:after {
    padding-top: 56.25%;
  }
  &.open iframe {
    transform: scale(1,1);
  }
}

最终结果与您想要的相似但不完全相同：

https://jsfiddle.net/jmarikle/kjd87was/

使用CSS转换而不占用原始空间

1 个答案: