我有一个响应式网站，我需要在 2 个不同的脚本标签下运行 2 个不同的动画，具体取决于 @media，但只有一个动画会运行，而另一个则绝对不执行任何操作。我不知道如何让它们都工作，或者如果某个 @media 是真的，如何让它们运行。
“导航滚动动画”应该在除移动设备之外的所有设备上运行。 “cta 动画”应该在移动设备上运行（任何 450 像素及以下的设备）。
“导航滚动动画影响的内容在移动布局上将不可见。
标题按钮将显示在所有屏幕宽度上，但我只想在设备宽度低于 450px 时发生“cta 动画”
仅当删除其中一个脚本标签时动画才起作用。
我尝试将两个脚本标签合并到同一个 if 语句中。我尝试使用 window.matchMedia()。唯一部分起作用的是删除其中一个脚本标签。
这是我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Whimsicss Studio - Websites for Small Businesses</title>
</head>
<body>
<header style="height:1000px;">
<nav id="navigation" style="position: fixed; top:0; width:100%; height:70px; background-color: grey; transition: .8s;">
</nav>
<script> /*navigation scroll animation*/
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navigation").style.top = "0";
} else {
document.getElementById("navigation").style.top = "-90px";
}
prevScrollpos = currentScrollPos;
}
</script>
<section style="margin-top: 90px;">
<h1>
Websites are more than design, they’re a part of a Strategy
</h1>
<a href="contact.html" class="button" id="header-button" style="display:block; position:fixed; bottom:30vh; background-color:skyblue; width:100px; height:50px; border:2px solid red; transition: 0.8s ease-in-out">
Lets Talk!
</a>
<script> /* cta animation*/
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header-button").style.left = "0.25in";
} else {
document.getElementById("header-button").style.left = "-10in";
prevScrollpos = currentScrollPos;
}
}
</script>
</section>
</header>
</body>
</html>
您应该使用CSS媒体查询根据媒体的宽度设置CSS属性（例如
transition最好不要使用内联样式。
请勿直接更改
style.class示例，仅在移动设备上具有
transition#element {
transition: 0.8s;
}
@media (min-width: 768px) {
#element {
transition: none;
}
}
由于我不确定要为您的示例制作哪些动画，因此我将提供一个我自己的示例，希望它会高效。
document.querySelectorAll(".btn").forEach(function(btn) {
btn.addEventListener("click", function(ev) {
btn.classList.toggle("animated");
})
}).btn {
position: relative;
top: 0;
padding: 10px;
}
.btn.animated {
top: 100px;
}
.btn-mobile {
transition: 0.8s;
}
.btn-desktop {
transition: none;
}
@media (min-width: 768px) {
.btn-mobile {
transition: none;
}
.btn-desktop {
transition: 0.8s;
}
}<button class="btn btn-mobile">animated on mobile</button>
<button class="btn btn-desktop">animated on desktop</button>