2017-12-15 4 views
0

누군가이 애니메이션으로 나를 도울 수 있습니까? 나는 이것을 복제하려고 노력해왔다. 나는 그것을 완성하는 데 너무 가깝지 만 모든 클릭에 대해 끝없이 애니메이션을 만들 수있는 방법을 찾을 수는 없습니다. 거대한, 미리 감사드립니다!여러 조건에 따라 removeClass를 사용하는 방법은 무엇입니까?

문제점 : 두 번의 클릭 후 내 애니메이션이 창에서 div 요소를 옮기지 않는 것 같습니다.

예상 결과 : 내가 링크 한 Instagram의 참조처럼 배경이 창으로 전환되어야 할 때마다 하나씩 클릭하십시오.

Reference

Here is the Demo Link

클래스가 어떤 클래스가없는 경우
<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"); 
    } 
    }); 
}); 
+1

이 **'+는'**는 적절한 조건 연산자와'hasClass는 ("")'아무 의미 – charlietfl

+0

'$하지 않습니다되지 않는다 ("# 블루"). hasClass ("스큐 blue_wrapper ")'hasClass'에 대한 잘못된 옵션입니다. hasClass ("skew") && $ ("blue"). hasClass ("blue_wrapper") 또는 $ ("# blue") 중 하나를 할 수 있습니다. "OR"$ ("# blue"). (". skew .blue_wrapper")' –

답변

0

당신의 논리는 다음이 LNT있는 클래스를 제거하면 위의 확인하려는에서

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

에 대한 이해되지 않는다 .

또한 사용자가 & & 또는 ||을 의미한다고 가정 할 때 +를 사용하고 있습니다. 당신이 블루 래퍼 또는 빨간색 포장지를 제거하지 않기 때문에

+0

네, &&와 함께 시도해 보았습니다. || 통신 수 및 아무데도 얻지 않으며 인내심을 잃는 결국. 그게 도움이 될만한 사람이 있다면. 감사! –

0

데모 링크가 작동하지 않습니다이 작동하는 데모를 얻을 것이다 : 일반 코드에 대한

$(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"); 
    } 
    }); 
}); 

, 당신은 &와 +를 교체해야합니다 & 또는 || 필요에 따라 추가 한 랩퍼를 제거하십시오.

0

일부 구문 문제는 일부 선택기 문제입니다. 테스트 할 CSS를 컴파일했습니다. 컴파일되지 않는 CSS가 하나 이상 제거되었습니다. 참고 더 잘 설명하기 위해 석회를 사용하도록 수정했습니다.

$(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"); 
 
    } 
 
    }); 
 
});
.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); 
 
    } 
 
}
<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>

+0

이것은 거의 좋지만 3 번 클릭으로 완전히 리셋 된 것 같습니다. 이것은 만족 스럽습니다! 당신이 그것을 완벽하게 도울 수 있다면 그것은 완벽 할 것입니다! 도와 주셔서 다시 한 번 감사드립니다! –

+0

처음부터 다시 시작합니다. 당신이 원하는 것이 무엇인지 확신 할 수 없다 - 단지 그 마지막 지점에서 "붙어있는"것이 이상하게 보이지만 당신의 요구에 맞게 바꿀 수있다. –

관련 문제