javascript - js에서 전환 효과를 만드는 방법은 무엇입니까?

Question

새내기는 js에 익숙하지 않은데 js를 사용하여 버튼을 클릭한 후 5초 후에 p가 오른쪽의 500px로 이동하면 이 효과를 만드는 아이디어는 무엇인지 알려주세요.

이러한 모든 효과를 얻으려면 먼저 클래스를 작성한 다음 js를 사용하여 className을 전환해야 합니까?

그런데 클릭 이벤트에 CSS 효과를 다 쓴다고요? QUQ

Answer 1

으아악

간단한 데모를 보여드리면 이는 방법 중 하나일 뿐이고 더 많은 방법이 있다는 것을 아실 겁니다!

Answer 2

이것이 당신이 원하는 것인가요? 아래 코드를 참조하세요. p가 5초 안에 500px로 이동합니다. 먼저 p에 대한 전환 효과를 설정하고 오른쪽으로 이동하는 클래스를 추가할 수 있습니다. js가 하는 일은 요소에 클래스를 추가하는 것입니다.

ps: 호환성 등을 고려하지 않은 데모 코드일 뿐입니다...

css3

으아악 으아악 으아악

Answer 3

CSS를 사용하거나 js에서 직접 작성할 수 있습니다. CSS의 경우 전환을 사용하여 작성합니다. 특히 Baidu의 경우 클릭 이벤트가 발생하면 요소에 클래스를 추가하고 스타일을 변경합니다. js의 경우 settimeout을 사용하고, 예시로 언급한 왼쪽 여백을 취하고, 왼쪽 여백을 조금씩 변경하고, 지정된 값인cleartimeout에 도달하면 중지합니다

Answer 4

위에서 언급했듯이 ie9 이하라면 타이머를 사용해야 합니다

으아악

Answer 5

일반적으로 CSS3가 사용됩니다transition实现过渡效果，要动画的话用animation. js를 사용하면 성능이 더 많이 소모됩니다

.

Answer 6

css3d 속성