누군가이 애니메이션으로 나를 도울 수 있습니까? 나는 이것을 복제하려고 노력해왔다. 나는 그것을 완성하는 데 너무 가깝지 만 모든 클릭에 대해 끝없이 애니메이션을 만들 수있는 방법을 찾을 수는 없습니다. 거대한, 미리 감사드립니다!여러 조건에 따라 removeClass를 사용하는 방법은 무엇입니까?
문제점 : 두 번의 클릭 후 내 애니메이션이 창에서 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");
}
});
});
이 **'+는'**는 적절한 조건 연산자와'hasClass는 ("")'아무 의미 – charlietfl
'$하지 않습니다되지 않는다 ("# 블루"). hasClass ("스큐 blue_wrapper ")'hasClass'에 대한 잘못된 옵션입니다. hasClass ("skew") && $ ("blue"). hasClass ("blue_wrapper") 또는 $ ("# blue") 중 하나를 할 수 있습니다. "OR"$ ("# blue"). (". skew .blue_wrapper")' –