如何在移动设备上添加/删除动画？html/css

Question

是否有一种方法可以使用媒体查询，您可以删除移动设备的动画，但保留其他设备的动画，如台式机或笔记本电脑？如果要为移动设备添加动画，但不希望将其放在任何其他设备(如笔记本电脑或计算机)上，这也适用于此情况。你能为此使用媒体查询吗？

例如：

我只想在移动设备上添加此动画

​

function show() {
  setTimeout(
    function() {
      document.getElementById('discord-shoutout').classList.add('online');
    },
    200
  );
}

function reset() {
  hide();
  setTimeout(show, 1500);
}

function hide() {
  document.getElementById('discord-shoutout').classList.remove('online');
}

show();

html,
body {
  background: #e9e9e9;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1.1;
}

.reset-button {
  font: 400 11px "Open Sans";
  line-height: 1;
  background: transparent;
  border-radius: 10px;
  border: 2px solid #7289da;
  color: #7289da;
  font-size: 1em;
  padding: 0.5em 0.8em;
  cursor: pointer;
}
.reset-button:hover {
  background: #7289da;
  color: #fff;
}

.discord-shoutout * {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

.discord-shoutout {
  position: fixed;
  bottom: 2em;
  right: 1em;
  width: 300px;
  z-index: 100;
  text-align: left;
  transition: 1s ease;
  visibility: hidden;
  opacity: 0;
  transform: translate(1em, 50px);
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}
.discord-shoutout.online {
  opacity: 1;
  transform: translate(0, 0);
  visibility: visible;
}
.discord-shoutout:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #7289da transparent transparent;
  position: absolute;
  right: 0;
  bottom: -25px;
}
.discord-shoutout .shoutout-inner {
  color: #fff;
  padding: 1em 1.5em 1.5em;
  transition: box-shadow 0.3s ease;
  background: transparent;
  border-radius: 1em/1em;
  overflow: hidden;
  position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
  content: "";
  border-width: 0;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  background-color: #7289da;
  z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
  height: 200%;
  top: 0;
  left: -46px;
  transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
  height: calc(100% - 25px);
  right: 0;
  top: 0;
}
.discord-shoutout .title {
  display: block;
  font-size: 1.2em;
  margin: 0 0 1em 0;
}
.discord-shoutout p {
  font-size: 0.9em;
  font-weight: 300;
  margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
  margin-top: 1.4em;
}
.discord-shoutout .discord-button {
  padding: 0.6em 1em;
  color: white;
  text-decoration: none;
  background: transparent;
  border: 0;
  font-size: 0.9em;
  cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
  border: 2px solid #fff;
  border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
  background: #fff;
  color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
  color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
  text-decoration: underline;
}
.discord-shoutout img {
  position: absolute;
  right: 1em;
  top: 1em;
  height: 1.4em;
}

<button class="reset-button" onclick="reset()">reset</button>
<div id="discord-shoutout" class="discord-shoutout">
  <div class="shoutout-inner">
    <img src="https://discordapp.com/assets/93608abbd20d90c13004925014a9fd01.svg">
    <span class="title">Hey there!</span>
    <p>
      Fancy having a chat?
    </p>
    <p>
      We're currently online on Discord!
    </p>
    <div class="discord-buttons">
      <a class="discord-button discord-primary" href="https://discord.gg/2nrFVCp" target="_blank">Join our server</a>
      <button class="discord-button discord-secondary" onclick="hide()">Close</button>
    </div>
  </div>
</div>

​

有没有办法只为移动设备添加上述动画？使用媒体查询或任何其他方法？

Answer 1

我可以想到两种方法。一个使用媒体查询，另一个使用javascript。我更喜欢媒体查询的方式。在下面的代码中，动画只能在小于600px的屏幕上运行。也就是说，它只能在移动设备上工作。

1. Media query way：可以在媒体查询

中添加切换动画的css

CSS：

html,
body {
  background: #e9e9e9;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1.1;
}

.reset-button {
  font: 400 11px "Open Sans";
  line-height: 1;
  background: transparent;
  border-radius: 10px;
  border: 2px solid #7289da;
  color: #7289da;
  font-size: 1em;
  padding: 0.5em 0.8em;
  cursor: pointer;
}
.reset-button:hover {
  background: #7289da;
  color: #fff;
}

.discord-shoutout * {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

.discord-shoutout {
  position: fixed;
  bottom: 2em;
  right: 1em;
  width: 300px;
  z-index: 100;
  text-align: left;
  transition: 1s ease;
  visibility: hidden;
  opacity: 0;
  transform: translate(1em, 50px);
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.15));
}
.discord-shoutout:hover {
  filter: drop-shadow(10px 8px 0px rgba(0, 0, 0, 0.25));
}

.discord-shoutout:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #7289da transparent transparent;
  position: absolute;
  right: 0;
  bottom: -25px;
}
.discord-shoutout .shoutout-inner {
  color: #fff;
  padding: 1em 1.5em 1.5em;
  transition: box-shadow 0.3s ease;
  background: transparent;
  border-radius: 1em/1em;
  overflow: hidden;
  position: relative;
}
.discord-shoutout .shoutout-inner:after, .discord-shoutout .shoutout-inner:before {
  content: "";
  border-width: 0;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  background-color: #7289da;
  z-index: -1;
}
.discord-shoutout .shoutout-inner:after {
  height: 200%;
  top: 0;
  left: -46px;
  transform: rotate(-18deg);
}
.discord-shoutout .shoutout-inner:before {
  height: calc(100% - 25px);
  right: 0;
  top: 0;
}
.discord-shoutout .title {
  display: block;
  font-size: 1.2em;
  margin: 0 0 1em 0;
}
.discord-shoutout p {
  font-size: 0.9em;
  font-weight: 300;
  margin: 0 0 0.6em 0;
}
.discord-shoutout .discord-buttons {
  margin-top: 1.4em;
}
.discord-shoutout .discord-button {
  padding: 0.6em 1em;
  color: white;
  text-decoration: none;
  background: transparent;
  border: 0;
  font-size: 0.9em;
  cursor: pointer;
}
.discord-shoutout .discord-button.discord-primary {
  border: 2px solid #fff;
  border-radius: 6px;
}
.discord-shoutout .discord-button.discord-primary:hover {
  background: #fff;
  color: #7289da;
}
.discord-shoutout .discord-button.discord-secondary {
  color: #fff;
}
.discord-shoutout .discord-button.discord-secondary:hover {
  text-decoration: underline;
}
.discord-shoutout img {
  position: absolute;
  right: 1em;
  top: 1em;
  height: 1.4em;
}

@media only screen and (max-width: 600px) {
    .discord-shoutout.online {
      opacity: 1;
      transform: translate(0, 0);
      visibility: visible;
    }
}

1. Javascript way动画:您还可以检查js中的窗口宽度，并切换动画类accordingly.

JS：

function show() {
  if(window.innerWidth < 600){
    setTimeout(
      function() {
        document.getElementById('discord-shoutout').classList.add('online');
      },
      200
    );
  }
}

function reset() {
  hide();
  setTimeout(show, 1500);
}

function hide() {
  document.getElementById('discord-shoutout').classList.remove('online');
}

show();