Cet article présente l'exemple de code de l'effet de stores HTML5 et le partage avec tout le monde. Les détails sont les suivants :
Introduction à la méthode de mise en œuvre :
1. La disposition des stores est superposée à la disposition du contenu avec un positionnement (position : absolue) et l'arrière-plan est défini sur transparent (couleur d'arrière-plan : transparent).
2. Les images clés définissent le fondu d'entrée et de sortie (changement de transparence) et l'animation de l'effet de fenêtre aveugle.
3. Démarrez l'animation en définissant l'attribut className du DOM, animator.className = 'baiyeWindow' ; écoutez l'événement de fin d'animation 'animationend' et effacez l'attribut className.
4. En cas de changement de disposition du contenu, appelez la méthode d'animation de démarrage. Les deux mises en page doivent lier l'événement de commutation ng-click=switchLayout().
5. Diagramme de séquence d'exécution de l'animation :
code html :
<!--Disposition pour afficher l'effet des stores--Changer de contenu--><div id=fadeInOut class=content ng-click=switchLayout()>...</div><!--Disposition des persiennes--> < 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>
Code de style CSS :
//Parler d'entrée et de sortie effect.fade-animation{ @-webkit-keyframes fadeInOut { 0% { opacité : 1 ; } 50 % { opacité : 0 ; } 100 % { opacité : 1 } } @keyframes fadeInOut { 0% { opacité : 1 ; } 50 % { opacité : 0 } 100 % { opacité : 1; } } animation : fadeInOut 1s easy-in ; -webkit-animation : fadeInOut 1s easy-in ; } //Effet de stores.baiyeWindow{ largeur : 100 % ; hauteur : 1,68rem ; : 1,2rem; li{ hauteur : 0,42rem ; hauteur de ligne : 40 px ; transparent ; .ye{ -webkit-animation : facilité d'entrée-sortie de slideOut ; animation : largeur d'entrée-sortie de slideOut 1 ; couleur d'arrière-plan : rgba(0,0,0,.2); : relatif ; haut : 50 % ; } } @-webkit-keyframes slideOut { 0% { padding-bottom : 50 % } 100 % ; padding-bottom: 40px; top: 0; } } @keyframes slideOut { 0% { padding-bottom: 0; top: 50% } 100% { padding-bottom: 40px;Code JS :
//Changement de disposition $scope.switchLayout = function(){ ... $scope.startBaiYeWindow(); //Après avoir démarré l'animation pendant 0,5 s, contrôlez la disposition pour afficher/masquer $timeout(function () { if ($ scope.show) { $scope.show = false; } else { .... } }, 500 }//Démarrer l'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 } ;Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.