Sample Code for Html5 blinds, html5 blinds

Sample Code for Html5 blinds, html5 blinds

This article introduces the sample code for Html5 blinds, which is as follows:

Implementation Method:

1. the shutter layout is positioned (position: absolute) over the content layout, and the background is set to transparent (background-color: transparent)
2. keyframes defines the fade-in and fade-out (Transparency changed) and shutter mouth animation.
3. To enable an animation, you can set the DOM's className attribute. The method is animator. className = 'javasyewindow'. Listen to the animation completion event 'animationend' and clear the className attribute.
4. In the content layout switching event, call the start animation method. Both la s must be bound to the switching event ng-click = "switchLayout ()"
5. animation execution sequence:

 

Html code:

<! -- Display the layout of the blinds -- switch content --> <div id = "fadeInOut" class = "content" ng-click = "switchLayout ()">... </div> <! -- Shutter layout --> <ul id = "yewindow" ng-click = "switchLayout () "> <li> <div class =" ye "> </div> </li> <div class =" ye "> </div> </li> <li> <div class = "ye"> </div> </li> <div class = "ye"> </div> </li> </ ul>

Css style code:

// Let's talk about the 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 1 s audio-in;-webkit-animation: fadeInOut 1 s blind-in;} // shutter effect. required yewindow {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 1 s memory-in-out; animation: slideOut 1 s memory-in-out; width: 100%; background-color: rgba, 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 the layout $ scope. switchLayout = function (){... $ scope. startjavasyewindow (); // After the animation is started for seconds, control the layout display/hide $ timeout (function () {if ($ scope. show) {$ scope. show = false;} else {....}}, 500);} // start the animation $ scope. startjavasyewindow = function () {var animator = document. getElementById ('invalid yewindow'); var animatorFadeInOut = document. getElementById ('fadeinout'); animator. addEventListener ('animationend', function () {animator. className = ''; animatorFadeInOut. className = 'content';}); $ timeout (function () {animator. className = 'invalid yewindow'; animatorFadeInOut. className = 'content fade-animation ';}, 0 );};

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.