Vue를 사용하여 애니메이션 효과를 얻는 방법(코드 포함) 교육

이전 글 "CSS3를 사용하여 간단한 페이지 레이아웃을 만드는 방법을 단계별로 가르쳐드립니다(자세한 코드 설명)"에서는 CSS3를 사용하여 간단한 페이지 레이아웃을 만드는 방법을 소개했습니다. 다음 글은 Vue를 사용하여 애니메이션 효과를 얻는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

공식 API 주소: https://cn.vuejs.org/v2/guide/transitions.html

공식 데모 클릭하면 표시되고 사라집니다demo点击显示与消失

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
<script>
  new Vue({
    el: "#demo",
    data: {
      show: true,
    },
  });
</script>
<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
</style>

transition 使用

<transition name="fade">
  (元素，属性、路由....)
</transition>

<strong>class</strong>定义

.fade-enter{ }进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)

.fade-enter-active{ }进入过渡的结束状态，元素被插入时就生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

.fade-leave{ }离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；

.fade-leave-active{ }离开过渡的结束状态，元素被删除时生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

自定义过度类名

• 默认的 .fade-enter变成 .fade-in-enter

• 默认的 .fade-enter-active变成 .fade-in-active

• 默认的 .fade-leave变成 .fade-out-enter

• 默认的 .fade-leave-active变成 .fade-out-active

<transition
  name="fade"
  enter-class="fade-in-enter"
  enter-active-class="fade-in-active"
  leave-class="fade-out-enter"
  leave-active-class="fade-out-active"
>
  <p v-show="show">hello</p>
</transition>

.fade-in-active,
.fade-out-active {
  transition: all 0.5s ease;
}
.fade-in-enter,
.fade-out-active {
  opacity: 0;
}

transition相关函数

<transition
  name="fade"
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
>
  <div v-show="show"></div>
</transition>
<script>
  export default {
    methods: {
      beforeEnter(el) {
        console.log("动画enter之前");
      },
      enter(el) {
        console.log("动画enter进入");
      },
      afterEnter(el) {
        console.log("动画进入之后");
        el.style.background = "blue";
      },
      beforeLeave(el) {
        console.log("动画leave之前");
      },
      leave(el) {
        console.log("动画leave");
      },
      afterLeave(el) {
        console.log("动画leave之后");
        el.style.background = "red";
      },
    },
  };
</script>

transition结合animate.css使用

以下代码演示元素以 X 轴为基线，翻转进场出场的动画Animate.css

<!-- 翻转进场出场-->
<transition enter-active-class="flipInX" leave-active-class="flipOutX">
  <div v-show="show" class="animated"></div>
</transition>
<!-- 或者 -->
<transition
  enter-active-class="animated flipInX"
  leave-active-class="animated flipOutX"
>
  <div v-show="show"></div>
</transition>

로그인 후 복사

transition

<transition-group enter-active-class="flipInX" leave-active-class="flipOutX">
  <div v-show="show" :key="x" v-for="x in 5"></div>
</transition-group>

<strong>class</strong>정의

.fade-enter{ }를 사용하여 입력하세요. 전환 요소가 삽입될 때 적용되는 시작 상태는 하나의 프레임만 적용한 후 즉시 삭제됩니다. (모션의 초기 상태)

.fade-enter-active{ } 끝으로 들어갑니다. 전환 상태이며 요소가 삽입됩니다. 전환/애니메이션이 완료되고 제거되면 적용됩니다. 이 클래스는 전환 프로세스 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다.

.fade-leave{ }요소가 삭제될 때 트리거되고 하나의 프레임만 적용한 후 즉시 삭제되는 전환의 시작 상태를 종료합니다.

.fade-leave- active{ } code>전환의 종료 상태를 종료하고 요소가 삭제될 때 적용되며 전환/애니메이션이 완료된 후에 제거됩니다. 이 클래스는 전환 프로세스 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다. 사용자 정의된 전환 클래스 이름

• 🎜기본 .fade-enter는 .fade-in-enter🎜
• 🎜기본 .fade-enter-active는 .fade-in-active🎜
🎜가 됩니다. 기본 .fade-leave는 .fade-out-enter🎜
• 🎜기본 .fade-leave-active가 됩니다. >는 .fade-out-active🎜

위 내용은 Vue를 사용하여 애니메이션 효과를 얻는 방법(코드 포함) 교육의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!