-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
TweenMax 적용 시 hover가 안되나요?
21.05.20 22:42 작성 조회수 140
0
임의로 카드들을 회전하게 하여 화면이 bottom으로 이동했을 경우 다시 원래대로 카드를 회전시키는 기능을 추가하였습니다. 그러나 이 경우에 마우스 커서를 가져다대어도 카드가 움직이지 않습니다. 카드가 회전을 마친 후 마우스를 가져다 댔을 때 hover 동작까지 수행하게 하려면 어떻게 바꿔야 하는지 궁금합니다.
TweenMax.to("li", 2.5, {
rotateY: 0,
delay: 2.2,
ease: Power3.easeInOut
});
js 파일에서는 이 부분만을 추가하였고 scss 파일에서는 다음과 같이 변경하였습니다.
ul {
perspective: 400px;
li {
display: inline-block;
margin: 0 2%;
width: 130px;
height: 200px;
border-radius: 6px 6px 6px 6px;
box-sizing: border-box;
padding: 10px;
transform: rotateY(45deg);
cursor: pointer;
p {
font-size: 40px;
color: #fff;
border-bottom: 2px dashed #fff;
}
&:nth-child(1) {
background: linear-gradient(45deg, #f7b733, #fc4a1a);
}
&:nth-child(2) {
background: linear-gradient(45deg, #FC00FF 0%, #401241 100%);
}
&:nth-child(3){
background-image: linear-gradient(45deg, #ce713b 0%, #F7CE68 100%);
}
&:nth-child(4){
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
&:hover {
transform: translateY(-20px);
}
}
}
답변을 작성해보세요.
0
코딩일레븐
지식공유자2021.05.23
hover랑 같이 사용은 힘듭니다.
tweenMax를 사용하시려면 css의 hover를 빼고 스크립트로 구현하면 됩니다.
var liAll = document.querySelectorAll("li");
liAll.forEach(function(li){
li.addEventListener("mouseenter", function(e){ <- 마우스 오버시
TweenMax.to(this, .5, {
rotateY: 30,
ease: Power3.easeOut
});
})
li.addEventListener("mouseout", function(e){ <- 마우스 아웃시
TweenMax.to(this, .5, {
rotateY: 0,
ease: Power3.easeOut
});
})
})
TweenMax.set("li", { <- set으로 초기 값 셋팅
rotateY: Math.random()*100, <- 랜덤은 예시입니다.
});
TweenMax.to("li", 2.5, {
rotateY: Math.random()*100,
delay: 2.2,
ease: Power3.easeInOut
});
0
답변 2