Vue中的过渡和动画——图解指南

前端

2023-11-25 10:42:12

在 Vue 中掌控过渡和动画：为您的应用程序注入活力和魅力

过渡：状态之间的优雅变化

想象一下，一种神奇的能力，能让元素以令人愉悦的方式在不同的状态之间切换。这就是过渡的本质。在 Vue 中，您可以使用 transition 属性来实现这些变化，指定元素在状态改变时如何平滑地变形。

动画：时间的精彩舞动

超越过渡的界限，动画让元素随着时间的流逝进行迷人的变化。借助 animation 属性，您可以创造元素的移动、旋转、缩放或其他生动效果。让您的应用程序展现出动态的魅力，吸引用户的注意力。

在 Vue 中释放过渡和动画的力量

在 Vue 中，过渡和动画可以通过以下方式轻松融入：

过渡： 使用 transition 属性，提供一个字符串或对象作为参数，定义元素状态变化时的效果。
动画： 类似于过渡，使用 animation 属性并提供字符串或对象，指定元素随着时间推移的变化。

代码示例：让按钮从淡入到淡出

<template>
  <button @click="toggleVisible">Toggle Visibility</button>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const visible = ref(true);

    onMounted(() => {
      // 使用 CSS 过渡实现淡入/淡出效果
      const button = document.querySelector('button');
      button.style.transition = 'opacity 0.5s ease-in-out';
    });

    const toggleVisible = () => {
      visible.value = !visible.value;
    };

    return {
      visible,
      toggleVisible,
    };
  },
};
</script>