javascript - 如何将使用 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>

标签： javascripthtmlcssanimation

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>