光阴似箭催人老，日月如移越少年。
试试动画事件~~예:
<!DOCTYPE html> <html> <머리> <title>애니메이션 테스트</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../script/jquery-2.1.3.min.js"></script> <스타일 유형="텍스트/css"> html{배경 색상: #fff;글꼴 계열: Arial, sans-serif;글꼴 크기: 12px;색상: #000;} body{text-rendering: OptimizeLegibility;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;width: 100%;margin: 0;padding: 0} {색상: #000;텍스트 장식: 없음;} #페이지{너비: 1125px;마진: 0px 자동;디스플레이: 블록;마진-상단: 10px;높이: 274px;} #single_column{배경 색상: #fff;패딩: 30px;패딩 하단: 50px;} #card_options_container h1{font-family:"Avalon-Medium", Roboto, Arial, sans-serif;font-weight:normal;color:#000;font-size:2em;text-transform:uppercase;font-weight:bold ;margin-bottom:20px;text-align: 중앙;} .register_signin_switcher {margin: 20px 0;text-align: center;} #card_options_container .card_options_btn {디스플레이: 인라인 블록; 패딩: 20px; 최소 너비: 280px; 글꼴 크기: 18px; 텍스트 변환: 대문자; 여백: 10px 10px 20px; 테두리: 2px 솔리드 #000;} .card_options_btn:hover{color:red;border: 2px 단색 빨간색 !important;} .clear_float {오버플로: 숨겨진;너비: 100%;클리어: 둘 다;} .base-color {텍스트 장식: 밑줄;색상: #d50032;} @keyframes 자동{ 형식 {높이:자동;} {높이: 0;}으로 } @-webkit-keyframes 자동{ 형식 {높이:자동;} {높이: 0;}으로 } .pageAnima { -webkit-animation:autoh 2s; 애니메이션:자동 2s; 오버플로:숨김; } </스타일> </머리> <본문> <p id="페이지"> <p id="single_column"> <p id="card_options_container"> <h1>vmei.com에 등록</h1> <p class="register_signin_switcher 센터"> <a class="card_options_btn show_with" href="#">세포라 카드가 있습니다</a> <a class="card_options_btn show_without" href="#">세포라 카드가 없습니다</a> <p class="clear_float"></p> <span>Sephora.com.au 계정이 있습니까?<a class="base-color" href="/users/sign_in">여기에서 로그인</a></span> </p> </p> </p> </p> </body> <스크립트 유형="텍스트/자바스크립트"> $(함수(){ $(".register_signin_switcher").on("클릭",".card_options_btn",function(){ $("#page").removeClass('pageAnima').addClass('pageAnima'); //$("#page").css({"-webkit-animation":"autoh 2s","animation":"autoh 2s","overflow":"hidden"}); }); $('#page').on("animationend",function(){ console.log('animationend'); $("#page").removeClass('pageAnima') }); }) </스크립트>
css3 애니메이션 속성을 추출하여 CSS 클래스 이름 규칙에 작성한 다음 클릭 시 페이지에 클래스 이름을 추가합니다. 애니메이션 종료 여부를 판단하려면 애니메이션과 동일한 지속 시간으로 타이머를 설정하면 애니메이션이 재생될 때 시작되고 종료되면 콜백이 실행됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
试试动画事件~~
예:
<!DOCTYPE html> <html> <머리> <title>애니메이션 테스트</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../script/jquery-2.1.3.min.js"></script> <스타일 유형="텍스트/css"> html{배경 색상: #fff;글꼴 계열: Arial, sans-serif;글꼴 크기: 12px;색상: #000;} body{text-rendering: OptimizeLegibility;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;width: 100%;margin: 0;padding: 0} {색상: #000;텍스트 장식: 없음;} #페이지{너비: 1125px;마진: 0px 자동;디스플레이: 블록;마진-상단: 10px;높이: 274px;} #single_column{배경 색상: #fff;패딩: 30px;패딩 하단: 50px;} #card_options_container h1{font-family:"Avalon-Medium", Roboto, Arial, sans-serif;font-weight:normal;color:#000;font-size:2em;text-transform:uppercase;font-weight:bold ;margin-bottom:20px;text-align: 중앙;} .register_signin_switcher {margin: 20px 0;text-align: center;} #card_options_container .card_options_btn {디스플레이: 인라인 블록; 패딩: 20px; 최소 너비: 280px; 글꼴 크기: 18px; 텍스트 변환: 대문자; 여백: 10px 10px 20px; 테두리: 2px 솔리드 #000;} .card_options_btn:hover{color:red;border: 2px 단색 빨간색 !important;} .clear_float {오버플로: 숨겨진;너비: 100%;클리어: 둘 다;} .base-color {텍스트 장식: 밑줄;색상: #d50032;} @keyframes 자동{ 형식 {높이:자동;} {높이: 0;}으로 } @-webkit-keyframes 자동{ 형식 {높이:자동;} {높이: 0;}으로 } .pageAnima { -webkit-animation:autoh 2s; 애니메이션:자동 2s; 오버플로:숨김; } </스타일> </머리> <본문> <p id="페이지"> <p id="single_column"> <p id="card_options_container"> <h1>vmei.com에 등록</h1> <p class="register_signin_switcher 센터"> <a class="card_options_btn show_with" href="#">세포라 카드가 있습니다</a> <a class="card_options_btn show_without" href="#">세포라 카드가 없습니다</a> <p class="clear_float"></p> <span>Sephora.com.au 계정이 있습니까?<a class="base-color" href="/users/sign_in">여기에서 로그인</a></span> </p> </p> </p> </p> </body> <스크립트 유형="텍스트/자바스크립트"> $(함수(){ $(".register_signin_switcher").on("클릭",".card_options_btn",function(){ $("#page").removeClass('pageAnima').addClass('pageAnima'); //$("#page").css({"-webkit-animation":"autoh 2s","animation":"autoh 2s","overflow":"hidden"}); }); $('#page').on("animationend",function(){ console.log('animationend'); $("#page").removeClass('pageAnima') }); }) </스크립트>css3 애니메이션 속성을 추출하여 CSS 클래스 이름 규칙에 작성한 다음 클릭 시 페이지에 클래스 이름을 추가합니다.
애니메이션 종료 여부를 판단하려면 애니메이션과 동일한 지속 시간으로 타이머를 설정하면 애니메이션이 재생될 때 시작되고 종료되면 콜백이 실행됩니다.