This article introduces the sample code of Html5 blinds effect and shares it with everyone. The details are as follows:
Implementation method introduction:
1. The blinds layout is overlaid on the content layout with positioning (position: absolute), and the background is set to transparent (background-color: transparent)
2. Keyframes define fade-in and fade-out (transparency change) and blind window effect animation.
3. Start the animation by setting the className attribute of the DOM, animator.className = 'baiyeWindow'; listen to the animation completion event 'animationend', and clear the className attribute.
4. In the event of content layout switching, call the startup animation method. Both layouts need to bind the switching event ng-click=switchLayout()
5. Animation execution sequence diagram:
html code:
<!--Layout to display blinds effect--Switch content--><div id=fadeInOut class=content ng-click=switchLayout()>...</div><!--Louvres layout--> < 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 style code:
//Talking in and out effect.fade-animation{ @-webkit-keyframes fadeInOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } animation: fadeInOut 1s ease-in; -webkit-animation: fadeInOut 1s ease-in; } //Blinds effect.baiyeWindow{ width: 100%; height: 1.68rem; position: absolute; left: 0; top : 1.2rem; li{ height: 0.42rem; line-height: 40px; overflow: hidden; background-color: transparent; .ye{ -webkit-animation: slideOut 1s ease-in-out; animation: slideOut 1s ease-in-out; width: 100%; background-color: rgba(0,0,0,.2); position : relative; top: 50%; } } @-webkit-keyframes slideOut { 0% { padding-bottom: 0; top: 50%; } 100% { padding-bottom: 40px; top: 0; } } @keyframes slideOut { 0% { padding-bottom: 0; top: 50%; } 100% { padding-bottom: 40px; top: 0; } } }JS code:
//Switch layout $scope.switchLayout = function(){ ... $scope.startBaiYeWindow(); //After starting the animation for 0.5s, control the layout to show/hide $timeout(function () { if ($scope.show) { $scope.show = false; } else { .... } }, 500); }//Start animation $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 = 'content fade-animation'; }, 0); };The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.