调整窗口大小后重新计算 CSS @keyframes（100vw 和 100vh）

Jordy 发表于 Dev

乔迪

我正在处理一个在 div 内弹跳的图像。

该 div 具有浏览器窗口的大小。

（该 div 已调整大小100vw并100vh使用 CSS。）

问题：

将浏览器窗口缩小后，图像会漂浮在div之外。

当我使浏览器窗口变大时，图像会在到达窗口边缘之前反弹。

结论：当我调整窗口大小时，图像在里面弹跳的 div不会调整大小。

可能的解决方案：

在调整窗口大小后重新计算 CSS 关键帧（100vw 和 100vh）。

例如使浏览器窗口更大-> 框更大。使浏览器窗口变小 -> 框变小。

题：

我能否通过以下方式最好地解决我的问题：

在使用 jQuery 调整窗口大小后重新加载整个页面？
通过检测窗口调整大小来重置CSS 中的vw和vh？
？？？

更新：

我刚才试过的（运气不好）：

    $(window).resize(function() {
      $(".box").css('width','100%');
      $(".box").css('height','calc(100% - 160px)');
    });

更新 02：

我猜我可能必须在调整窗口大小后以某种方式重置它：

    @keyframes box {
      100% { transform: translateX( calc(100vw - 80px)); }
    }
    
    @keyframes smile {
      100% { transform: translateY( calc(100vh - 160px)); }
    }

我希望我能让盒子流畅地跟随浏览器窗口的宽度和高度......

更新 03：

正如“A Haworth”在下面的评论中指出的那样，这个问题只发生在 Safari 中，而不是在 Chrome 中。

更新 04

我目前正在使用“A Haworth”的临时解决方案，并仅在用户使用 Safari 时重新加载窗口大小调整动画。

    const box = document.querySelector('.box');
    const smile = document.querySelector('.smile');

    if (
        navigator.userAgent.indexOf('Safari') != -1 && 
        navigator.userAgent.indexOf('Chrome') == -1 && 
        navigator.userAgent.indexOf('CriOS/') == -1
        )  { 

            function resize() {
                box.style.animationName = 'none';
                smile.style.animationName = 'none';
                $('.smile').hide();
                setTimeout(function () {
                    box.style.animationName = 'box';
                    smile.style.animationName = 'smile';
                    $('.smile').fadeIn('slow');
                }, 1000);
            }
            window.onresize = resize;
            }

片段：

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.smile {
  height:  80px;
  width:  80px;
  margin: 0;
  padding: 0;
}

.box {
  animation: box 13s linear infinite alternate;
}

.smile {
  animation: smile 7s linear infinite alternate;
}

@keyframes box {
  100% {
    transform: translateX( calc(100vw - 80px));
  }
}

@keyframes smile {
  100% {
    transform: translateY( calc(100vh - 80px));
  }
}

<div class="box">
        <img class="smile" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/smiling-face-with-sunglasses_1f60e.png" />
</div>

霍沃思

由于您已经在使用在调整视口大小时自动更改的单位，因此您不需要进行任何重新计算。

我能看到的唯一问题是出现了改变“边缘”的滚动条。你真的不想要这些，所以将整个事情的容器设置为overflow: hidden. 在这个片段中，整个容器是 body 元素。

它还将填充和边距设置为 0，否则看起来好像表情符号有点过早地到达顶部。

更新：尝试通过移除动画并在一秒后再次设置来强制动画重置为新的尺寸（应该能够使用 requestAnimationFrame 但到目前为止还没有工作）。这是在出现问题的 Safari 上进行的试用。

const box = document.querySelector('.box');
const smile = document.querySelector('.smile');
function resize() {
  box.style.animationName = 'none';
  smile.style.animationName = 'none';
  setTimeout(function () {
    box.style.animationName = 'box';
    smile.style.animationName = 'smile';
  }, 1000);
}
window.onresize = resize;

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.smile {
  height:  80px;
  width:  80px;
  margin: 0;
  padding: 0;
}

.box {
  animation: box 13s linear infinite alternate;
}

.smile {
  animation: smile 7s linear infinite alternate;
}

@keyframes box {
  100% {
    transform: translateX( calc(100vw - 80px));
  }
}

@keyframes smile {
  100% {
    transform: translateY( calc(100vh - 80px));
  }
}

<body>
<div class="box">
        <img class="smile" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/smiling-face-with-sunglasses_1f60e.png" />
</div>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。