Le CSS de Vue.js implémente une animation excessive-js tutoriel-php.cn

Le CSS de Vue.js implémente une animation excessive

php中世界最好的语言

Libérer： 2018-03-13 14:24:07

original

1580 Les gens l'ont consulté

Cette fois, je vais vous présenter l'animation de transition CSS dans Vue.js , quelles sont les précautions dans l'animation de transition CSS Vue.js, jetons un coup d'œil ensemble. regarder.

transition animation

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="adc">
        <p v-show="show">I am show</p>
      </transition>
    </div>
  </div></template><script>
  export default {
    data () {      return {        show: true
      }
    }
  }</script><style>
 .adc-enter-active, .adc-leave-active {   transition: all 2s ease-out;
 }  .adc-enter, .adc-leave-to {    opacity: 0;
  }</style>

Copier après la connexion

animation de transformation CSS

<template>  <div>    <button @click="show = !show">Toggle</button>    <div class="ab">      <transition name="my-trans">        <p v-show="show">I am show</p>      </transition>    </div>  </div></template><script>  export default {    data () {      return {        show: true      }    }  }</script><style>  .my-trans-enter-active, .my-trans-leave-active {    transition: all .5s ease-out;  }  .my-trans-enter {    transform: translateY(-100px);    opacity: 0;  }  .my-trans-leave-active {    transform: translateY(100px);  }</style>

Copier après la connexion

animation de transformation CSS

composant dynamique

<template>
  <div>
    <button @click="onToggle">Toggle</button>
    <div class="ab">
      <transition name="fade">
        //动态组件        <div :is="componentView"></div>
      </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 {        componentView: &#39;com-a&#39;
      }
    },    methods: {
      onToggle () {        if (this.componentView === &#39;com-a&#39;) {          this.componentView = &#39;com-b&#39;
        } else {          this.componentView = &#39;com-a&#39;
        }
      }
    }
  }</script><style>
 .fade-enter-active, .fade-leave-active {   transition: all 2s ease-out;
 }  .fade-enter, .fade-leave-to {    opacity: 0;
  }</style>

Copier après la connexion

Composants dynamiques, le mode est le mode par défaut

Les transitions d'entrée et de sortie qui prennent effet en même temps ne peuvent pas répondre à toutes les exigences, Vue propose donc un mode de transition
in-out : Les nouveaux éléments transitent en premier, l'élément actuel disparaît une fois terminé.
out-in : l'élément actuel effectue la transition en premier, puis le nouvel élément entre.
La valeur par défaut est in-out

L'animation ci-dessus, si elle est définie en mode="out-in"

<transition name="fade" mode="out-in">   <div :is="componentView"></div></transition>
mode="out-in"

Copier après la connexion

Remarque : si les deux noms de balises sont identiques, ils le seront ne pas être exécuté. L'animation, si vous souhaitez effectuer une animation, vous devez définir des clés différentes pour les balises afin de les distinguer

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="fade" mode="out-in">
        <p v-if="show" >i am show</p>
        <p v-else >not in show</p>
      </transition>
    </div>
  </div></template>

Copier après la connexion

Deux animations avec le même nom de balise ne définissent pas de clés différentes

S'ils sont définis différemment, vous pouvez exécuter l'animation

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="fade" mode="out-in">
        //设置不同的key        <p v-if="show" key="1">i am show</p>
        <p v-else key="2">not in show</p>
      </transition>
    </div>
  </div></template>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

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

Événements Vue.js - liaison d'événement intégrée, liaison d'événement personnalisé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!