Maison > Article > interface Web > Explication détaillée de l'utilisation de l'animation de transition animée

Explication détaillée de l'utilisation de l'animation de transition animée

php中世界最好的语言original: 2018-05-02 09:25:362081parcourir

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de l'animation de transition animée. Quelles sont les précautions lors de l'utilisation de l'animation de transition animée. Voici un cas pratique, jetons un coup d'œil.

Introduction :

Utilisation de la méthode de transition
Méthode intégrée de transition
transition-group

la bibliothèque animée implémente l'animation de transition

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib\vue.js"></script>
  <link rel="stylesheet" href="lib\animate.css" rel="external nofollow" >
  <style>
    [v-cloak] {
      display: none;
    }
    p {
      width: 100px;
      height: 100px;
      background: red;
      margin: 10px auto;
    }
    /* .fade-enter-active, .fade-leave-active {
      transition: 1s all ease;
    }
    .fade-enter-active {
      opacity: 1;
      width: 300px;
      height: 300px;
    }
    .fade-leave-active {
      opacity: 0;
      width: 100px;
      height: 100px;
    }
    .fade-enter, .fade-leave {
      width: 100px;
      height: 100px;
      opacity: 0;
    } */
  </style>
  <script>
    window.onload = function() {
      new Vue({
        el: '#box',
        data: {
          show: '',
          list: ['apple', 'banana', 'orange', 'pear']
        },
        computed: {
          lists: function() {
            var arr = [];
            this.list.forEach(function(val) {
              if (val.indexOf(this.show) != -1) {
                arr.push(val);
              }
            }.bind(this))
            return arr;
          }
        }
      })
    }
  </script>
</head>
<body>
  <p id="box" v-cloak>
    <input type="text" v-model="show">
    <!-- class定义 .fade
      .fade-enter{}      初始状态
      .fade-enter-active{}   进入过程
      .fade-leave{}      离开状态
      .fade-leave-active{}   离开过程
    -->
    <transition-group enter-active-class="zoomInLeft" leave-active-class="bounceOutRight">
      <!-- 内置方法
        @before-enter = "beforeEnter"
        @enter = "enter"
        @after-enter = "afterEnter"
        @before-leave = "beforeLeave"
        @leave = "leave"
        @after-leave = "afterLeave"
      -->
      <!-- transition-group 多个元素运动，注意绑定key:1 -->
      <p v-show="show" class="animated" v-for="(val, index) in lists" :key="index">
        {{val}}
      </p>  
    </transition-group>
  </p>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. contenu, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Conseils pour utiliser l'authentification de connexion par applet WeChat

Utilisation des composants d'entrée angulaires et des composants déclaratifs Explication détaillée

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!

php angular transition 微信小程序

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des étapes de transmission des données via les accessoiresArticle suivant：Explication détaillée des étapes de transmission des données via les accessoires

Articles Liés

Voir plus