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

집

웹 프론트엔드

JS 튜토리얼

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

Jun 26, 2018 am 09:38 AM

vue

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

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

소스코드 바로가기:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;Vue滑动效果&lt;/title&gt;
  &lt;style&gt;
    .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;
    }
  &lt;/style&gt;
  &lt;script src=&quot;https://cdn.bootcss.com/vue/2.4.2/vue.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p id=&quot;app&quot;&gt;
  &lt;p&gt;{{ message }}&lt;/p&gt;
  &lt;p class=&quot;wrap&quot;&gt;
    &lt;transition name=&quot;show&quot;&gt;
      &lt;p class=&quot;d&quot; v-for=&quot;item in list&quot; :key=&quot;item.id&quot; v-if=&quot;count === item.id&quot;&gt;
        {{ item.text }}
      &lt;/p&gt;
    &lt;/transition&gt;
  &lt;/p&gt;
  &lt;button @click=&quot;add&quot;&gt;add&lt;/button&gt;
&lt;/p&gt;
 
&lt;script&gt;
  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 &lt; this.list.length - 1) {
          this.count += 1;
        } else {
          this.count = 0;
        }
      }
    }
  })
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

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

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

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