如何将使用 javascript 的动画限制为特定屏幕尺寸？

Question

我制作了一张卡片叠在一起的动画。 当我点击最上面的一张时，它消失了，它下面的所有卡片都一张一张地改变它们的位置。 为此，我使用了带有 javascript 的转换翻译属性。 但是在移动屏幕上，有些卡片会超出视图区域。 我想从移动屏幕上删除此动画。 我怎样才能做到这一点？

 let card1 = document.querySelector('#card1'); let card2 = document.querySelector('#card2'); let card3 = document.querySelector('#card3'); let card4 = document.querySelector('#card4'); let card5 = document.querySelector('#card5'); let card6 = document.querySelector('#card6'); let card7 = document.querySelector('#card7'); let card8 = document.querySelector('#card8'); let cardW = document.querySelector('#cardW'); cardW.addEventListener('click', function() { card1.style.transform = "translate(350px,0px)"; card2.style.transform = "translate(-350px, 0px)"; card3.style.transform = "translate(350px , 300px)"; card4.style.transform = "translate(-350px , -300px)"; card5.style.transform = "translate(-350px , 300px)"; card6.style.transform = "translate(350px , -300px)"; card7.style.transform = "translate(0px , -300px)"; card8.style.transform = "translate(0px , 300px)"; cardW.style.opacity = "0"; });

 .card-container { margin: 180px 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .card { text-align:center; background: blue; position: absolute; width: 240px; height: 250px; color: #fff; border-radius:20px; transition: 1.6s ease; background-size: contain; background-position: center; } #card1{ transition-delay:0.2s; } #card2{ transition-delay:0.4s; } #card3{ transition-delay:0.6s; } #card4{ transition-delay:0.8s; } #card5{ transition-delay:1s; } #card6{ transition-delay:1.2s; } #card7{ transition-delay:1.4s; } #card8{ transition-delay:1.6s; }

 <div class="card-container"> <div class="card" id="card8"> <div class="card-content"> <div class="card-title"> <h1>Title8</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card7"> <div class="card-content"> <div class="card-title"> <h1>Title7</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card6"> <div class="card-content"> <div class="card-title"> <h1>Title6</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card5"> <div class="card-content"> <div class="card-title"> <h1>Titl5</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card4"> <div class="card-content"> <div class="card-title"> <h1>Title4</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card3"> <div class="card-content"> <div class="card-title"> <h1>Title3</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card2"> <div class="card-content"> <div class="card-title"> <h1>Title2</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card1"> <div class="card-content"> <div class="card-title"> <h1>Title1</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="cardW"> <h3>Wrapper Card</h3> </div> </div>

Answer 1

JavaScript 中的媒体查询

所以是的，你可以在 JavaScript 中使用媒体查询，例如

var mquery = window.matchMedia('(min-width: 768px)');

if (mquery.matches) {
  // do stuff
}

浏览器支持是合理的。 有一些方法可以检查旧浏览器支持的窗口大小（ window.innerWidth 、 element.getBoundingClientRect ），但如果您使用 CSS 转换，它可能会排除许多真正古老的浏览器。

MDN： https : //developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

所以在你的情况下，你可能会这样做：

 /* Smaller media query so that the snippet works. obviously if it were 768px the snippet wouldn't work, and you'd need an event listener on window resize event to set up the animations for when the snippet is expanded... Easier if you just change the media query and test it on your machine */ let mquery = window.matchMedia('(min-width: 480px)'); if (mquery.matches) { setupAnimation(); } function setupAnimation () { let card1 = document.querySelector('#card1'); let card2 = document.querySelector('#card2'); let card3 = document.querySelector('#card3'); let card4 = document.querySelector('#card4'); let card5 = document.querySelector('#card5'); let card6 = document.querySelector('#card6'); let card7 = document.querySelector('#card7'); let card8 = document.querySelector('#card8'); let cardW = document.querySelector('#cardW'); cardW.addEventListener('click', function() { card1.style.transform = "translate(350px,0px)"; card2.style.transform = "translate(-350px, 0px)"; card3.style.transform = "translate(350px , 300px)"; card4.style.transform = "translate(-350px , -300px)"; card5.style.transform = "translate(-350px , 300px)"; card6.style.transform = "translate(350px , -300px)"; card7.style.transform = "translate(0px , -300px)"; card8.style.transform = "translate(0px , 300px)"; cardW.style.opacity = "0"; }); }

 .card-container { margin: 180px 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .card { text-align:center; background: blue; position: absolute; width: 240px; height: 250px; color: #fff; border-radius:20px; transition: 1.6s ease; background-size: contain; background-position: center; } #card1{ transition-delay:0.2s; } #card2{ transition-delay:0.4s; } #card3{ transition-delay:0.6s; } #card4{ transition-delay:0.8s; } #card5{ transition-delay:1s; } #card6{ transition-delay:1.2s; } #card7{ transition-delay:1.4s; } #card8{ transition-delay:1.6s; }

 <div class="card-container"> <div class="card" id="card8"> <div class="card-content"> <div class="card-title"> <h1>Title8</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card7"> <div class="card-content"> <div class="card-title"> <h1>Title7</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card6"> <div class="card-content"> <div class="card-title"> <h1>Title6</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card5"> <div class="card-content"> <div class="card-title"> <h1>Titl5</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card4"> <div class="card-content"> <div class="card-title"> <h1>Title4</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card3"> <div class="card-content"> <div class="card-title"> <h1>Title3</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card2"> <div class="card-content"> <div class="card-title"> <h1>Title2</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card1"> <div class="card-content"> <div class="card-title"> <h1>Title1</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="cardW"> <h3>Wrapper Card</h3> </div> </div>

---

或者...

作为旁注，您还可以将所有翻译属性移动到 CSS 中，将它们放入 CSS 媒体查询中，在 JS 中点击时分配一个 CSS 类，最终结果将是相同的。

 let cards = [].slice.call(document.querySelectorAll('.card')); let cardW = document.querySelector('#cardW'); cardW.addEventListener('click', function() { cards.forEach(function(card){card.classList.add('transformed')}); cardW.classList.add('hidden'); });

 .card-container { margin: 180px 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .card { text-align:center; background: blue; position: absolute; width: 240px; height: 250px; color: #fff; border-radius:20px; transition: 1.6s ease; background-size: contain; background-position: center; } #card1{ transition-delay:0.2s; } #card2{ transition-delay:0.4s; } #card3{ transition-delay:0.6s; } #card4{ transition-delay:0.8s; } #card5{ transition-delay:1s; } #card6{ transition-delay:1.2s; } #card7{ transition-delay:1.4s; } #card8{ transition-delay:1.6s; } @media (min-width: 768px) { #cardW.hidden {opacity:0} #card1.transformed {transform: translate(350px,0px) } #card2.transformed {transform: translate(-350px, 0px) } #card3.transformed {transform: translate(350px , 300px) } #card4.transformed {transform: translate(-350px , -300px) } #card5.transformed {transform: translate(-350px , 300px) } #card6.transformed {transform: translate(350px , -300px) } #card7.transformed {transform: translate(0px , -300px) } #card8.transformed {transform: translate(0px , 300px) } }

 <div class="card-container"> <div class="card" id="card8"> <div class="card-content"> <div class="card-title"> <h1>Title8</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card7"> <div class="card-content"> <div class="card-title"> <h1>Title7</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card6"> <div class="card-content"> <div class="card-title"> <h1>Title6</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card5"> <div class="card-content"> <div class="card-title"> <h1>Titl5</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card4"> <div class="card-content"> <div class="card-title"> <h1>Title4</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card3"> <div class="card-content"> <div class="card-title"> <h1>Title3</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card2"> <div class="card-content"> <div class="card-title"> <h1>Title2</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card1"> <div class="card-content"> <div class="card-title"> <h1>Title1</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="cardW"> <h3>Wrapper Card</h3> </div> </div>

Answer 2

尝试使用window.innerWidth检查窗口的宽度，并根据用户使用的窗口宽度添加动画。

cardW.addEventListener('click', function() {
    if (window.innerWidth >= {something})
    {
        {your animation}
    }
});