Vue의 전환을 사용하여 슬라이딩 전환을 완료하는 방법-JS 튜토리얼-php.cn

Vue의 전환을 사용하여 슬라이딩 전환을 완료하는 방법

不言

풀어 주다： 2018-06-26 09:38:16

원래의

2810명이 탐색했습니다.

이 글에서는 주로 Vue의 전환을 사용하여 슬라이딩 전환을 완성하기 위한 샘플 코드를 소개합니다. 편집자는 꽤 좋다고 생각하여 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

vue를 사용하여 작은 애니메이션 효과를 만드는 것은 매우 편리합니다. 오늘은 vue의 전환을 사용하여 슬라이딩 전환 효과를 완성해 보고자 합니다.

소스코드 바로가기:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue滑动效果</title>
  <style>
    .d {
      position: absolute;
      border: 1px solid red;
      width: 30px;
      height: 30px;
    }
    @keyframes show {
      0% {
        opacity: 0;
        left: 32px;
      }
      100% {
        opacity: 1;
        left: 0;
      }
    }
    @keyframes hide {
      0% {
        opacity: 1;
        left: 0;
      }
      100% {
        opacity: 0;
        left: -32px;
      }
    }
    .show-enter-active {
      animation: show 1.2s;
    }
    .show-leave-active {
      animation: hide 1.2s;
    }
    .show-enter, .show-leave-to {
      opacity: 0;
    }
    .wrap {
      position: relative;
      width: 32px;
      height: 32px;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <p>{{ message }}</p>
  <p class="wrap">
    <transition name="show">
      <p class="d" v-for="item in list" :key="item.id" v-if="count === item.id">
        {{ item.text }}
      </p>
    </transition>
  </p>
  <button @click="add">add</button>
</p>

<script>
  new Vue({
    el: &#39;#app&#39;,
    data () {
      return {
        message: &#39;Hello Vue.js!&#39;,
        count: 0,
        list: [
          {id: 0, text: &#39;aaa&#39;},
          {id: 1, text: &#39;bbb&#39;},
          {id: 2, text: &#39;ccc&#39;}
        ]
      }
    },
    methods: {
      add: function () {
        if (this.count < this.list.length - 1) {
          this.count += 1;
        } else {
          this.count = 0;
        }
      }
    }
  })
</script>
</body>
</html>

로그인 후 복사

여기서 주목해야 할 점은 부모는 상대값을 사용하고, 자식은 위치 지정에 절대값을 사용하며, 왼쪽 값은 위치 제어에 사용된다는 점입니다. 여기서 변환을 사용하면 이전 p가 점진적으로 사라지는 과정을 거치기 때문에 이 과정에서 항상 그 위치가 존재하게 되어 뒤따르는 p가 해당 위치로 올바르게 이동할 수 없게 되므로 절대값을 사용하는 것이 좋습니다.

실제로 작동하지 않으면 전환의 모드 속성을 사용하여 out-in으로 설정하면 전자가 먼저 애니메이션을 완료하여 다음 p가 이동할 수 있도록 점유된 위치가 완전히 사라지도록 할 수 있습니다. 그러나 이 방법은 애니메이션을 하나씩 완료할 수 있을 뿐 동시에 애니메이션을 완료할 수는 없습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!