Vue 페이지 전환 애니메이션 구현 및 일반 애니메이션 효과

Vue는 데이터 기반 접근 방식을 사용하여 개발자가 강력한 상호 작용과 아름다운 데이터 표현을 갖춘 단일 페이지 웹 애플리케이션을 구축할 수 있도록 지원하는 인기 있는 JavaScript 프레임워크입니다. Vue에는 유용한 기능이 많이 내장되어 있으며 그 중 하나가 페이지 전환 애니메이션입니다. 이 글에서는 Vue의 전환 애니메이션 기능을 사용하는 방법을 소개하고 가장 일반적인 애니메이션 효과에 대해 논의합니다.

Vue 페이지 전환 애니메이션 구현

Vue의 페이지 전환 애니메이션은 Vue의 <transition></transition> 및 <transition-group></transition-group> 구성 요소를 통해 구현됩니다. 아래에서는 이 두 가지 구성 요소를 각각 소개합니다. <transition></transition>与<transition-group></transition-group>组件实现的。下面我们分别介绍这两个组件。

<transition></transition>

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

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

下面是一个简单的<transition></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-group></transition-group>组件与<transition></transition>很相似，但是它适用于列表项或者表格等需要同时进行插入和移除的元素。

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

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

在下面的例子中，我们展示了一个简单的列表，每当点击按钮时，都会添加或者删除一项。在这个例子中，我们使用了<transition-group></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>和<transition-group></transition-group>

<transition></transition>

<transition></transition> 구성 요소는 래핑된 요소가 삽입, 업데이트 또는 제거될 때 자동으로 전환 애니메이션 효과를 수행할 수 있습니다. 🎜🎜이 구성 요소는 입력 전, 입력, 입력 후, 입력 취소 및 before-leave, leave, after-leave, leave-cancelled와 같은 코드를 사용하면 전환 시작을 제어할 수 있습니다. 종료하고 취소하세요. 🎜🎜다음은 삽입 시 요소의 전환 애니메이션을 보여주는 간단한 <transition></transition> 애니메이션 효과입니다. 이 구성요소에는 애니메이션 이름을 지정하기 위한 name 속성이 필요합니다. 아래 예에서 애니메이션 이름은 fade입니다. 여기의 CSS 스타일은 시작과 끝에서 요소의 전환 애니메이션 효과를 정의합니다. 🎜rrreee

<transition-group></transition-group>

🎜<transition-group></transition-group> 구성 요소는 <transition></transition>과 매우 유사하지만 다음과 같이 작동합니다. 동시에 삽입하고 제거해야 하는 항목이나 테이블과 같은 요소를 나열합니다. 🎜🎜<transition></transition> 구성 요소와 마찬가지로 before-enter와 같은 <transition-group></transition-group> 구성 요소에서 후크 기능을 정의할 수 있습니다. 코드>, 입력 등. 🎜🎜<transition-group></transition-group>는 전환 구성 요소에서 생성된 HTML 태그 유형을 지정하기 위해 tag 속성을 ​​지정해야 합니다. 또한 Vue가 삽입, 업데이트 또는 제거된 요소를 올바르게 식별할 수 있도록 각 하위 요소에는 고유한 키 값이 있어야 합니다. 🎜🎜아래 예에서는 버튼을 클릭할 때마다 항목을 추가하거나 제거하는 간단한 목록을 보여줍니다. 이 예에서는 <transition-group></transition-group> 구성 요소를 사용하고 HTML 태그 유형을 ul로 지정합니다. 목록의 각 항목에는 Vue가 전환 애니메이션을 올바르게 수행하는 데 도움이 되는 키 값이 함께 제공됩니다. 🎜rrreee🎜일반적으로 사용되는 전환 애니메이션 효과🎜🎜이제 Vue의 전환 애니메이션 사용법을 소개했습니다. 몇 가지 일반적인 전환 애니메이션 효과를 살펴보겠습니다. 🎜

페이드

🎜페이드 효과는 페이드 아웃하거나 페이드 아웃하는 데 사용됩니다. 요소의 불투명도를 0에서 1로 또는 1에서 0으로 변경합니다. 🎜rrreee

슬라이드

🎜슬라이드 효과는 요소가 슬라이드 아웃되거나 한쪽으로 슬라이드되는 데 사용됩니다. 요소의 위치를 ​​한 위치에서 다른 위치로 이동합니다. 🎜rrreee

Scale

🎜Scale 효과는 요소를 작은 것에서 큰 것으로 또는 큰 것에서 작은 것으로 크기를 조정하는 데 사용됩니다. 요소의 너비와 높이를 한 크기에서 다른 크기로 축소합니다. 🎜rrreee

회전

🎜회전 효과는 축을 중심으로 요소를 회전하는 데 사용됩니다. 요소를 각도로 회전시킵니다. 🎜rrreee🎜Summary🎜🎜Vue의 전환 애니메이션 기능을 사용하면 페이지 요소가 삽입, 업데이트 또는 제거될 때 애니메이션 전환 효과를 추가하여 페이지를 더욱 생생하고 흥미롭게 만들 수 있습니다. 이 글에서는 Vue의 <transition></transition> 및 <transition-group></transition-group> 구성요소를 사용하여 전환 애니메이션을 구현하는 방법을 소개합니다. 또한 일반적으로 사용되는 몇 가지 전환 애니메이션 효과도 소개합니다. Vue 애플리케이션에 애니메이션 효과를 추가해야 하는 경우 다음 구성 요소를 사용해 볼 수 있습니다. 🎜

위 내용은 Vue 페이지 전환 애니메이션 구현 및 일반 애니메이션 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!