Implémentation de l'animation de transition de page Vue et effets d'animation courants

Vue est un framework JavaScript populaire qui utilise une approche basée sur les données pour aider les développeurs à créer des applications Web d'une seule page avec une forte interactivité et une belle présentation des données. Vue intègre de nombreuses fonctionnalités utiles, dont l'animation de transition de page. Dans cet article, nous présenterons comment utiliser la fonction d'animation de transition de Vue et discuterons des effets d'animation les plus courants.

Implémentation de l'animation de transition de page Vue

L'animation de transition de page de Vue se fait via <transition> et <transition>与<transition-group>组件实现的。下面我们分别介绍这两个组件。

<transition>

<transition>组件可以在被包裹的元素在插入、更新或者移除时，自动执行过渡动画效果。

该组件向外部发出before-enter、enter、after-enter、enter-cancelled和before-leave、leave、after-leave、leave-cancelled等钩子函数，让我们可以控制过渡的开始、结束和取消。

下面是一个简单的<transition>动画效果，展示了一个元素在插入时的过渡动画。请注意，该组件需要一个name属性，用于指定动画的名称。在下面的例子中，动画名称是fade。这里的CSS样式定义了开始和结束时元素的过渡动画效果。

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="fade">
      <div v-if="show">Hello Vue!</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

<transition-group>

<transition-group>组件与<transition>很相似，但是它适用于列表项或者表格等需要同时进行插入和移除的元素。

与<transition>组件一样，在<transition-group>组件中可以定义钩子函数，如before-enter、enter等。

<transition-group>需要指定一个tag属性，用于指定过渡组件生成的HTML标签类型。它还需要每个子元素带有一个唯一的键值，使Vue可以正确地识别插入、更新或者移除的元素。

在下面的例子中，我们展示了一个简单的列表，每当点击按钮时，都会添加或者删除一项。在这个例子中，我们使用了<transition-group>组件，并且指定了HTML标签类型为ul。列表中的每个项都带有一个键值，以帮助Vue正确地执行过渡动画。

<template>
  <div>
    <button @click="shift()">Add/Remove Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
    };
  },
  methods: {
    shift() {
      if (this.items.length > 0) {
        this.items.shift();
      } else {
        this.items.push("New Item");
      }
    },
  },
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

常用的过渡动画效果

现在，我们已经介绍了如何使用Vue的过渡动画。下面让我们来看看一些常见的过渡动画效果。

Fade

Fade效果用于渐隐或者渐显的效果。它将元素的不透明度从0变化到1或者从1变化到0。

<transition name="fade">
  <div v-if="show">Hello Vue!</div>
</transition>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Slide

Slide效果用于元素从一侧滑出或者滑动到一侧的效果。它将元素的位置从一个位置移动到另一个位置。

<transition name="slide">
  <div v-if="show">Hello Vue!</div>
</transition>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter-to,
.slide-leave {
  transform: translateX(100%);
}
.slide-enter,
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

Scale

Scale效果用于元素从小到大或者从大到小的缩放效果。它将元素的宽度和高度从一种大小缩小到另一种大小。

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="scale">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.scale-enter-active,
.scale-leave-active {
  transition: transform 0.5s;
}
.scale-enter,
.scale-leave-to {
  transform: scale(0);
}
</style>

Rotate

Rotate效果用于元素绕着一个轴旋转的效果。它将元素绕着一个角度旋转。

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="rotate">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.rotate-enter-active,
.rotate-leave-active {
  transition: transform 0.5s;
}
.rotate-enter,
.rotate-leave-to {
  transform: rotate(180deg);
}
</style>

总结

Vue的过渡动画功能可以让我们在页面元素插入、更新或者移除时，添加动画过渡效果，从而使页面更加生动和有趣。本文介绍了如何使用Vue的<transition>和<transition-group>

<transition>

<transition>Le composant peut effectuer automatiquement une animation de transition lorsque l'élément encapsulé est inséré, mis à jour ou supprimé. #🎜🎜##🎜🎜#Ce composant émet before-enter, enter, after-enter, enter-cancelled au en dehors de et avant le congé, leave, after-leave, leave-cancelled et autres hooks fonctions, Nous permet de contrôler le début, la fin et l'annulation des transitions. #🎜🎜##🎜🎜#Ce qui suit est un simple effet d'animation <transition>, montrant l'animation de transition d'un élément lorsqu'il est inséré. Veuillez noter que ce composant nécessite un attribut name pour spécifier le nom de l'animation. Dans l'exemple ci-dessous, le nom de l'animation est fade. Le style CSS définit ici l'effet d'animation de transition de l'élément au début et à la fin. #🎜🎜#rrreee

<transition-group>

#🎜🎜#<transition-group>Le composant est très similaire à <transition> code> , mais il convient aux éléments tels que les éléments de liste ou les tableaux qui doivent être insérés et supprimés en même temps. #🎜🎜##🎜🎜#Identique au composant <transition>, les fonctions de hook peuvent être définies dans le composant <transition-group>, comme avant de saisir, enter, etc. #🎜🎜##🎜🎜#<transition-group>Vous devez spécifier un attribut tag pour spécifier le type de balise HTML générée par le composant de transition. Cela nécessite également que chaque élément enfant ait une valeur de clé unique afin que Vue puisse identifier correctement les éléments insérés, mis à jour ou supprimés. #🎜🎜##🎜🎜#Dans l'exemple ci-dessous, nous montrons une liste simple qui ajoute ou supprime un élément à chaque fois que vous cliquez sur un bouton. Dans cet exemple, nous utilisons le composant <transition-group> et spécifions le type de balise HTML comme ul. Chaque élément de la liste est accompagné d'une valeur clé pour aider Vue à effectuer correctement l'animation de transition. #🎜🎜#rrreee#🎜🎜#Effets d'animation de transition couramment utilisés#🎜🎜##🎜🎜#Maintenant, nous avons présenté comment utiliser l'animation de transition de Vue. Jetons un coup d'œil à quelques effets d'animation de transition courants. #🎜🎜#

Fade

#🎜🎜# L'effet Fade est utilisé pour faire un fondu ou un fondu. Il change l'opacité d'un élément de 0 à 1 ou de 1 à 0. #🎜🎜#rrreee

Slide

#🎜🎜# L'effet Slide est utilisé pour faire glisser des éléments vers l'extérieur ou sur le côté. Il déplace la position d'un élément d'une position à une autre. #🎜🎜#rrreee

Échelle

#🎜🎜# L'effet Échelle est utilisé pour redimensionner les éléments de petit à grand ou de grand à petit. Il réduit la largeur et la hauteur d'un élément d'une taille à une autre. #🎜🎜#rrreee

Rotation

#🎜🎜# L'effet Rotate est utilisé pour faire pivoter des éléments autour d'un axe. Il fait pivoter l’élément autour d’un angle. #🎜🎜#rrreee#🎜🎜#Summary#🎜🎜##🎜🎜#La fonction d'animation de transition de Vue nous permet d'ajouter des effets de transition animés lorsque des éléments de la page sont insérés, mis à jour ou supprimés, rendant la page plus vivante et intéressante. Cet article explique comment utiliser les composants <transition> et <transition-group> de Vue pour implémenter l'animation de transition. Il présente également plusieurs effets d'animation de transition couramment utilisés. Si vous devez ajouter des effets d'animation à votre application Vue, vous pouvez aussi bien essayer ces composants. #🎜🎜#

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!