Question

有人可以帮我解决这个动画吗？我一直试图复制这个。我非常接近完成它，但是无法找到让每次点击动画无穷无尽的方法。很大，提前谢谢！

问题：两次点击后，我的动画将div元素从窗口转移出来似乎不起作用。

预期结果：每次点击一次，背景应该转换到窗口，就像我与你链接的Instagram的引用一样。

<div class="bg">
  <div id="blue" class="skew"></div>
  <div id="red" class="skew"></div>
  <div id="blue_2" class="skew"></div>
</div>

<button>Toggle</button>

$skew: skew(-10deg);

html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.bg {
  position: relative;
  background: red;
  width: inherit;
  height: inherit;
  overflow: hidden;
}

.skew {
  position: relative;
  width: 100%;
  height: inherit;
  transform: translateX(-110%);
  animation-fill-mode: forwards;
  &.blue_wrapper {
    background: blue;
    animation: slideRight 1s forwards;
  }
  &.red_wrapper {
    background: red;
    animation: slideRight 1s forwards;
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    width: 250px;
    height: inherit;
    background: inherit;
    transform: $skew;
  }
  &::before {
    left: -5%;
  }
  &::after {
    right: -5%;
  }
}

#red,
#blue_2 {
  position: absolute;
  top: 0;
  left: 0;
}

blue_2.blue_wrapper_2 {
  background: blue;
  animation: slideRight 1s forwards;
}

button {
  position: fixed;
  right: 30px;
  bottom: 30px;
}

@keyframes slideRight {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0);
  }
}

$(document).ready(function() {
  $("button").on("click", function() {
    if (
      $("#blue").hasClass("blue_wrapper")
    ) {
      $("#red").addClass("red_wrapper");
    } else if (
      $("#blue").hasClass("skew blue_wrapper") &&
      $("#red").hasClass("skew red_wrapper")
    ) {
      $("skew red_wrapper").removeClass("red_wrapper");
      $("skew blue_wrapper").removeClass("blue_wrapper");
      $("blue_2").addClass("blue_wrapper_2");
    } else if {
      $("#blue_2").hasClass("blue_wrapper_2")
    ) {
      $("#red").removeClass("red_wrapper");
      $("#blue").removeClass("blue_wrapper");
    } else {
      $("#blue").addClass("blue_wrapper");
    }
  });
});

Answer 1

你的逻辑对

毫无意义

else if (
   $("#blue").hasClass("") +
   $("#red").hasClass("") +
   $("#blue_2").hasClass("blue_wrapper_2")
   ) {
   $("#red").removeClass("red_wrapper");
   $("#blue").removeClass("blue_wrapper");

在上面你要检查类是否没有类，然后删除那里的类。

当我认为你的意思是＆amp;＆amp;或||

Answer 2

您的演示链接不起作用，因为您没有删除蓝色包装器或红色包装器，这将使演示工作：

$(document).ready(function() {
  $("button").on("click", function() {
    if ($("#blue").hasClass("blue_wrapper")) {
        $("#red").addClass("red_wrapper");
        $("#blue").removeClass("blue_wrapper");
     } else {
       $("#blue").addClass("blue_wrapper");
       $("#red").removeClass("red_wrapper");
     }
  });
});

对于常规代码，您应该将＆替换为＆amp;＆amp;或||根据需要，删除您添加的包装器。

Answer 3

一些语法问题，一些选择器问题。编译CSS进行测试。删除了一个无法编译的奇怪的CSS事物。注意我修改为使用石灰开始更好地说明。

＆＃13;

$(function() {
  $("button.toggle").on("click", function() {
    if (
      $("#blue").hasClass("blue_wrapper") && !$("#red").hasClass("red_wrapper")
    ) {
      $("#red").addClass("red_wrapper");
    } else if (
      $("#blue").hasClass("blue_wrapper") &&
      $("#red").hasClass("red_wrapper")
    ) {
      $(".red_wrapper").removeClass("red_wrapper");
      $(".blue_wrapper").removeClass("blue_wrapper");
      $("#blue_2").addClass("blue_wrapper_2");
    } else if (
      $("#blue_2").hasClass("blue_wrapper_2")
    ) {
      $("#red").removeClass("red_wrapper");
      $("#blue").removeClass("blue_wrapper");
       $("#blue_2").removeClass("blue_wrapper_2")
   } else {
      $("#blue").addClass("blue_wrapper");
    }
  });
});

＆＃13;

.skew {
  transform: skew(-10deg);
}
html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.bg {
  position: relative;
  background: lime;
  width: inherit;
  height: inherit;
  overflow: hidden;
}
.skew {
  position: relative;
  width: 100%;
  height: inherit;
  transform: translateX(-110%);
  animation-fill-mode: forwards;
}
.skew.blue_wrapper {
  background: blue;
  animation: slideRight 1s forwards;
}
.skew.red_wrapper {
  background: red;
  animation: slideRight 1s forwards;
}
.skew::before,
.skew::after {
  content: "";
  position: absolute;
  top: 0;
  width: 250px;
  height: inherit;
  background: inherit;
  transform: $skew;
}
.skew::before {
  left: -5%;
}
.skew::after {
  right: -5%;
}
#red,
#blue_2 {
  position: absolute;
  top: 0;
  left: 0;
}
#blue_2.blue_wrapper_2 {
  background: blue;
  animation: slideRight 1s forwards;
}
button {
  position: fixed;
  right: 30px;
  bottom: 30px;
}
@keyframes slideRight {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg">
  <div id="blue" class="skew">blue</div>
  <div id="red" class="skew">red</div>
  <div id="blue_2" class="skew">blue_2</div>
</div>

<button class="toggle">Toggle</button>

＆＃13;

如何根据多个条件使用removeClass？

3 个答案: