Transition d'implémentation de Vue.js vers js

Cette fois, je vais vous présenter la transition de Vue.js vers js. Quelles sont les précautions pour utiliser Vue.js pour implémenter la transition Ce qui suit est un cas pratique, jetons un coup d'œil.

<template>
  <div>
    <button>Toggle</button>
    <div>
      <transition>
        <p>i am show</p>
      </transition>
    </div>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  import comB from &#39;./components/b.vue&#39;
  export default {    components: {comA, comB},
    data () {      
return
 {        show: true
      }
    },    methods: {//      
动画
执行的起始位置
      beforeEnter: function (el) {
        $(el).css({          left: &#39;50px&#39;,          opacity: 0
        })
      },      enter: function (el, done) {
        $(el).animate({          left: &#39;200px&#39;,          opacity: 1
        }, {          duration: 1500,          complete: done
        })
      },      leave: function (el, done) {
        $(el).animate({          left: &#39;500px&#39;,          opacity: 0
        }, {          duration: 1500,          complete: done
        })
      }
    }
  }</script><style>.animate-p {  
position
: absolute;  top: 100px;  left: 0;
}</style>

Lorsque l'étiquette est masquée, l'animation de sortie est exécutée
Lorsque l'étiquette est affichée, l'animation beforeEnter, enter est exécutée

animation de transition js

Quand j'apprenais l'application à emporter Ele.me, j'ai découvert qu'écrire comme ça pouvait aussi être fait,
Ajouter une transition

<div v-show="detailShow" class="detail" transition="fade">

à l'étiquette à animer dans le code CSS

   .detail
      ......
      &.fade-transition
        opacity: 1        background: rgba(7, 17, 27, 0.8)
      &.fade-enter,&.fade-leave
        opacity: 0        background: rgba(7, 17, 27, 0)

De cette façon, vous pouvez facilement implémenter une animation avec une transparence d'arrière-plan excessive

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article .Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Propriétés calculées et surveillance des données de Vue.js

Liaison d'événement de Vue.js - Construit -dans la liaison d'événement, liaison d'événement personnalisée

Méthode de mise à jour synchrone des données de liste dans Vue.js

Vue. js list rendant le sous-composant d'objet de tableau v-for

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!