이 글에서는 Html5 블라인드 효과의 샘플 코드를 소개하고, 자세한 내용은 다음과 같습니다.
구현 방법 소개:
1. 블라인드 레이아웃은 컨텐츠 레이아웃에 포지셔닝(위치:절대)으로 겹쳐지고, 배경은 투명(배경색:투명)으로 설정됩니다.
2. 키프레임은 페이드인 및 페이드아웃(투명도 변경)과 블라인드 창 효과 애니메이션을 정의합니다.
3. DOM의 className 속성을 설정하여 애니메이션을 시작합니다. animator.className = 'baiyeWindow'; 애니메이션 완료 이벤트 'animationend'를 수신하고 className 속성을 지웁니다.
4. 콘텐츠 레이아웃 전환 시 시작 애니메이션 메서드를 호출합니다. 두 레이아웃 모두 전환 이벤트 ng-click=switchLayout()을 바인딩해야 합니다.
5. 애니메이션 실행 순서 다이어그램:
HTML 코드:
<!--블라인드 효과를 표시할 레이아웃--콘텐츠 전환--><div id=fadeInOut class=content ng-click=switchLayout()>...</div><!--루브르 레이아웃--> < ul id=baiyeWindow ng-click=switchLayout()> <li><div class=ye></div></li> <li><div class=ye></div></li> <li>< div class=ye></div></li> <li><div class=ye></div></li> </ul>
CSS 스타일 코드:
//말하기 effect.fade-animation{ @-webkit-keyframes fadeInOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1 } } @keyframes fadeInOut { 불투명도: 1; } 50% { 불투명도: 0 } 100% { 불투명도: 1; } } animation: fadeInOut 1s 여유; } //Blinds effect.baiyeWindow{ width: 1.68rem; : 1.2rem; li{ 높이: 0.42rem; 줄 높이: 40px; 숨김; transparent; .ye{ -webkit-animation: SlideOut 1s easy-in-out width: 100%; rgba(0,0,0,.2); : 상대; 상단: 50%; } } @-webkit-keyframes 슬라이드아웃 { 0% { 패딩 하단: 0 } 100%; 패딩 하단: 0; } } @keyframes 슬라이드아웃 { 0% { 패딩 하단: 50% } 100% { 패딩 하단: 40px;JS 코드:
//레이아웃 전환 $scope.switchLayout = function(){ ... $scope.startBaiYeWindow(); //0.5초 동안 애니메이션을 시작한 후 레이아웃을 표시하거나 숨기도록 제어합니다. $timeout(function () { if ($ scope.show) { $scope.show = false; } else { .... } }, 500)//애니메이션 시작 $scope.startBaiYeWindow = function () { var animator = document.getElementById('baiyeWindow'); var animatorFadeInOut = document.getElementById('fadeInOut'); animator.addEventListener('animationend', function () { animator.className = ''; animatorFadeInOut.className = 'content'; }) ; $timeout(function () { animator.className = 'baiyeWindow'; animatorFadeInOut.className = '콘텐츠 페이드 애니메이션' }, 0);위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.