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

Question

我制作了一张卡片相互堆叠的动画。当我点击最上面的一张时，它会消失，并且它下面的所有卡片都会一张一张地改变它们的位置。为此，我使用了带有 javascript 的 transform translate 属性。但是在移动屏幕上，有些卡片会超出查看区域。我想从移动屏幕上删除这个动画。我怎样才能做到这一点？

    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}
    }
});