질문 있습니다

Question

위와같이 하고 있는데요. 화살표가 0에 위치했다가 다시 돌아가게끔 해주고싶은데, 처음에 400도가 나왔다고 하면 해당 위치에서 다음 값의 위치로만 움직입니다. 해당 이슈를 해결하려면 어떻게 해야할까요..? 아래 코드 첨부했습니다! < html lang = " en " > < head > < meta charset = " UTF-8 " /> < meta http-equiv = " X-UA-Compatible " content = " IE=edge " /> < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " /> < title > Document < style > div { width : 400 px ; height : 400 px ; background : red ; border-radius : 50 % ; display : flex ; justify-content : center ; align-items : center ; } h1 { font-size : 80 px ; transition : all 600 ms cubic-bezier ( 1 , -0.06 , 0.985 , 1.01 ); } < body > < div > < h1 > ↑ < button > 동작 < script > const btn = document . querySelector ( " button " ); const arrow = document . querySelector ( " h1 " ); const arrowRotate = ( aLot = 5 ) => { const rotateValue = aLot * 360 + Math . ceil ( Math . random () * 360 ) ; arrow . style . transform = ` rotate( ${ rotateValue } deg) ` ; } ; const arrowInit = () => { arrow . style . transition = " 0 " ; arrow . style . transform = ` rotate(0deg) ` ; } ; const moveArrow = ( aLot ) => { arrowInit () ; setTimeout ( () => { arrowRotate ( aLot ) ; }, 1000 ) ; } ; btn . addEventListener ( " click " , () => { moveArrow (); });

코딩일레븐 · Answer

안녕하세요. const arrowInit = () => {  arrow.style.transition Duration  = "0s";    <- 이부분을 수정하시면 됩니다.  arrow.style.transform = `rotate(0deg)`; }; const arrowRotate = (aLot = 5) => { const rotateValue = aLot * 360 + Math.ceil(Math.random() * 360); arrow.style.transitionDuration  = "1s"; arrow.style.transform = `rotate(${rotateValue}deg)`; }; css의 transition-duration time 을 바꿔주는 겁니다. transition: all 1s cubic-bezier(1, -0.06, 0.985, 1.01);