淡入淡出 in/out，按视口比例

Question

由于这个概念的一些必要部分，需要视口比 >=1:1 但也 <=2:1。

当它不是 1:1 和 2:1 之间的值时，应该有一个 div 容器淡入，其中我有一条短信。但是当视口比例被修正到一个合适的值时，它应该会自动淡出。

这种检查应该在每次视口尺寸发生变化时进行，而不仅仅是在加载页面时进行。

有人可以帮我解决这个问题吗？

Answer 1

查看这个 JSfiddle：https://jsfiddle.net/ChefGabe/e1vfhyuw/ （您可以调整输出大小 window 以模拟页面大小调整）

第 1 行和第 2 行是事件侦听器。 DOMContentLoaded 在页面加载时解析 HTML 之后触发。 resize 在调整大小时触发（duh）。

（编辑：DOMContentLoaded 在 JSfiddle 中不起作用，但它应该在真实场景中起作用）

我用this Whosebug question获取了浏览器的宽高。

希望对您有所帮助！

Answer 2

检查window的大小，监听window对象触发的onresize事件，resize事件可以在短时间内触发多次，所以最好只在经过一定时间后才执行回调，因此 throttle() 函数

function throttle(interval, fn) {
  var inProgress;
  return function() {
    if (inProgress) {
      clearTimeout(inProgress);
    }
    else {
      inProgress = setTimeout(fn, interval);
    }
  }
}

var onResize = throttle(500, function() {
  if ((screen.availWidth / screen.availHeight) <= 2)
    fadeIn();
  else
    fadeOut();
});
window.addEventListener('resize', onResize, false);

Answer 3

实际上您甚至不需要 JavaScript。我建议通过纯 CSS media query 来解决这个问题。 aspect ratio 有一个，所以我们会使用类似

的东西

@media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) { ... }

然后在查询中您可以触发消息的可见性。

@media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
    .ratio-message {
        /* Whatever custom animation to reveal the message like opacity or display */
        transform: translateX(0);
    }
}

还有一个关于 jsfiddle 的例子。

淡入淡出 in/out，按视口比例

fade in/out, by ratio of viewport

javascript

fade

viewport