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

Question

我制作了一张纸牌堆叠在一起的动画。当我点击最上面的一张时，它消失了，它下面的所有卡片一张一张地改变它们的位置。为此，我使用了 transform translate 属性和 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 大小（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 媒体查询，分配一个 CSS class在JS中点击，最终结果是一样的。

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 检查 window 的宽度，并根据 window 用户正在使用的宽度添加动画。

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

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

How do i restrict a animation using javascript to certain screen size?

html

javascript

css

animation

JavaScript

或者...