如何將使用 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}
    }
});