새내기는 js에 익숙하지 않은데 js를 사용하여 버튼을 클릭한 후 5초 후에 p가 오른쪽의 500px로 이동하면 이 효과를 만드는 아이디어는 무엇인지 알려주세요.
이러한 모든 효과를 얻으려면 먼저 클래스를 작성한 다음 js를 사용하여 className을 전환해야 합니까?
그런데 클릭 이벤트에 CSS 효과를 다 쓴다고요? QUQ
으아악
간단한 데모를 보여드리면 이는 방법 중 하나일 뿐이고 더 많은 방법이 있다는 것을 아실 겁니다!
이것이 당신이 원하는 것인가요? 아래 코드를 참조하세요. p가 5초 안에 500px로 이동합니다. 먼저 p에 대한 전환 효과를 설정하고 오른쪽으로 이동하는 클래스를 추가할 수 있습니다. js가 하는 일은 요소에 클래스를 추가하는 것입니다.
으아악 으아악 으아악
CSS를 사용하거나 js에서 직접 작성할 수 있습니다. CSS의 경우 전환을 사용하여 작성합니다. 특히 Baidu의 경우 클릭 이벤트가 발생하면 요소에 클래스를 추가하고 스타일을 변경합니다. js의 경우 settimeout을 사용하고, 예시로 언급한 왼쪽 여백을 취하고, 왼쪽 여백을 조금씩 변경하고, 지정된 값인cleartimeout에 도달하면 중지합니다
위에서 언급했듯이 ie9 이하라면 타이머를 사용해야 합니다
일반적으로 CSS3가 사용됩니다transition实现过渡效果，要动画的话用animation. js를 사용하면 성능이 더 많이 소모됩니다
transition
animation
css3d 속성
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
으아악
간단한 데모를 보여드리면 이는 방법 중 하나일 뿐이고 더 많은 방법이 있다는 것을 아실 겁니다!
이것이 당신이 원하는 것인가요? 아래 코드를 참조하세요. p가 5초 안에 500px로 이동합니다. 먼저 p에 대한 전환 효과를 설정하고 오른쪽으로 이동하는 클래스를 추가할 수 있습니다. js가 하는 일은 요소에 클래스를 추가하는 것입니다.
ps: 호환성 등을 고려하지 않은 데모 코드일 뿐입니다...
css3으아악 으아악 으아악
CSS를 사용하거나 js에서 직접 작성할 수 있습니다. CSS의 경우 전환을 사용하여 작성합니다. 특히 Baidu의 경우 클릭 이벤트가 발생하면 요소에 클래스를 추가하고 스타일을 변경합니다. js의 경우 settimeout을 사용하고, 예시로 언급한 왼쪽 여백을 취하고, 왼쪽 여백을 조금씩 변경하고, 지정된 값인cleartimeout에 도달하면 중지합니다
위에서 언급했듯이 ie9 이하라면 타이머를 사용해야 합니다
으아악일반적으로 CSS3가 사용됩니다
.transition实现过渡效果，要动画的话用animation. js를 사용하면 성능이 더 많이 소모됩니다css3d 속성