개발자

모바일 웹에서 버튼 클릭 효과 구현(Vue.js)

2022년 11월 08일조회 530

호버효과처럼 버튼을 누르고 있는 동안 어두워졌다가 손을 떼면 다시 밝아지게끔 하는 효과를 구현하고자 합니다. 토스 웹사이트에서는 사파리로 접속해도 되길래 이게 가능한것 같은데 어떤 키워드로 검색해야 하는지모르겠어서 막혔습니다. 지금은 button과 클래스 명으로 각각 transition 차이를 줘서 버튼 눌렀을 때(누르는 동안X) 눌리는 효과를 주었습니다. 긴 글 읽어주셔서 감사합니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 3

정진호님의 프로필 사진

답변이 되실지 모르겠지만 framer-motion 라이브러리를 써보시는걸 추천드립니다.

엄홍재님의 프로필 사진

js의 이벤트를 통해 조작하는건 어떤가요? 마우스를 누를 때 onMouseDown 클릭이 끝날때 onMouseUp이 일어나는 것을 바탕으로 const [isPressing, setIsPressing] = useState(false) <button className={`${isPressing ? '눌리고 있을때 클래스' : '기본 클래스'}`} onMouseDown={() => {setIsPressing(prevState => !prevState)}} onMouseUp={() => {setIsPressing(prevState => !prevState)}} > 이런식으로 구현해보았습니다.

커리어리 Q&A 운영자님의 프로필 사진

안녕하세요, 해당 질문은 리액트 관련 질문이 아닌 것으로 파악되어 토픽이 React에서 기술/커리어로 변경될 예정입니다. 감사합니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!