Code d'effet d'obturateur HTML5

Cet article présente principalement l'exemple de code de l'effet de stores Html5. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

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 d'implémentation :

1. (position : absolue) pour une mise en page aveugle Couvert sur la mise en page du contenu, l'arrière-plan est défini sur transparent (background-color : transparent)
2, et les images clés définissent le fondu entrant et sortant (changement de transparence) et l'effet de fenêtre aveugle animation.
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. 🎜 >

code html :

<!--要显示百叶窗效果的布局--切换内容-->
<p id="fadeInOut" class="content"  ng-click="switchLayout()">
...
</p>
<!--百叶窗布局-->
 <ul id="baiyeWindow"  ng-click="switchLayout()">
       <li><p class="ye"></p></li>
        <li><p class="ye"></p></li>
        <li><p class="ye"></p></li>
        <li><p class="ye"></p></li>
  </ul>

code de style CSS :

  //谈入谈出效果
 .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;
      }
      //百叶窗效果
      .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;
          }
        }
      }

Code JS :

//切换布局
$scope.switchLayout = function(){
    ...
    $scope.startBaiYeWindow();
    //启动动画0.5s后，控制布局显示/隐藏
    $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 = 'content fade-animation';
            }, 0);
        };

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile pour l'apprentissage de tout le monde Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

À propos de l'introduction du partage d'affiches WeChat sur toile HTML5

Canvas réalise le code d'effet du chevauchement dynamique des balles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!