내부 구성요소 캐러셀 전환 효과를 구현하는 Vue용 샘플 코드-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

내부 구성요소 캐러셀 전환 효과를 구현하는 Vue용 샘플 코드

亚连

May 26, 2018 pm 02:13 PM

스위치효과구성 요소

이 글에서는 내부 구성 요소의 캐러셀 전환 효과를 구현하기 위한 Vue의 샘플 코드를 주로 소개하고 참고용으로 제공합니다.

라우팅이 필요하지 않은 내부 컴포넌트의 경우 전환 시 캐러셀 전환 효과를 추가하려고 합니다.

캐러셀 컴포넌트를 도입할 수 있지만 일반적으로 캐러셀에 문제가 있습니다. 모든 슬라이드를 렌더링한 다음 전환하면 모든 리소스가 로드됩니다. 결국 슬라이드가 많으면 로드해야 할 그림과 기타 리소스가 너무 많아질 수 있습니다. 한 번. 따라서 요구 사항을 충족하기 위해 수동으로 간단히 작성할 수 있습니다.

이제 이 기능을 단계별로 구현하겠습니다. 먼저 기본 전환을 구현하는 데모를 작성합니다.

1. 전환을 구현하려면

먼저 vue-cli를 사용하여 엔지니어링 스캐폴딩을 구축하고 다음 명령을 사용하세요.

npm install -g vue-cli
vue init webpack slide-demo # 运行后router等都选择no

이렇게 하면 webpack + vue 프로젝트가 설정됩니다. 슬라이드 데모 디렉토리에 들어가서 src/App.vue를 봅니다. 이 파일은 초기화 도구에서 제공되며 전체 페이지의 구성 요소입니다. 하위 구성 요소가 배치되는 디렉터리인 src/comComponents 디렉터리도 있습니다.

이 디렉터리에 task-1.vue, task-2.vue, task-3.vue라는 3개의 새 구성 요소를 만든 다음 아래 App.vue와 같이 App.vue로 가져옵니다.

<script>
// import HelloWorld from &#39;./components/HelloWorld&#39;
import Task1 from "./components/task-1";
import Task2 from "./components/task-2";
import Task3 from "./components/task-3";
 
export default {
  name: &#39;App&#39;,
  components: {
    Task1,
    Task2,
    Task3
  }
}
</script>

데이터 형식 질문은 다음과 같습니다.

[{index: 1, type: 1, content: &#39;&#39;}, {index: 2, type: 1, content: &#39;&#39;}, 
{index: 3, type: 2, content: &#39;&#39;}, {index: 4, type: 3, content: &#39;&#39;}]

배열입니다. 배열의 각 요소는 각 질문을 나타냅니다. 각 질문에는 객관식 질문, 빈칸 채우기 질문, 참 질문 등의 유형이 있습니다. 위의 task-1, task-2, task-3에 각각 해당하는 currentIndex 변수를 사용하여 현재 어떤 질문에 있는지를 나타내며 다음 코드와 같이 0으로 초기화됩니다. App.에 추가됨):

  data() {
    return {
      currentIndex: 0
    };
  },
  created() {
    // 请求question数据
    this.questions = [
      {index: 1, type: 1, question: &#39;&#39;}, /*...*/];
  },

currentIndex의 값을 변경하면 다음 항목, 즉 다음 구성 요소로 전환할 수 있습니다. 이 전환 효과를 어떻게 얻을 수 있나요?

다음 코드에 표시된 것처럼 Vue에서 사용자 정의한 전역 구성 요소 구성 요소를 is 속성과 결합하여 구성 요소를 동적으로 변경하는 목적을 달성할 수 있습니다.

<template>
<p id="app">
  <p class="task-container">
    <component :is="&#39;task-&#39; + questions[currentIndex].type" 
    </component>
  </p>
</p>
</template>

currentIndex가 증가하면 변경됩니다. : is inside 값이 task-1에서 task-2, task-3 등으로 순서대로 변경되어 해당 task 컴포넌트로 대체됩니다.

그런 다음 다음 질문으로 전환하는 버튼을 추가하고 이 버튼의 응답 함수에서 currentIndex 값을 변경하세요. 동시에 질문 데이터를 구성 요소에 전달합니다.

<template>
<p id="app">
  <p class="task-container">
    <component :is="&#39;task-&#39; + questions[currentIndex].type" 
      :question="questions[currentIndex]"></component>
    <button class="next-question" @click="nextQuestion">下一题</button>
  </p>
</p>
</template>

응답 함수 nextQuestion은 다음과 같이 구현됩니다.

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
        % this.questions.length;
  }
},

각 작업의 구체적인 구현 참조는 task-1과 같습니다. vue 예:

<template>
<section>
  <h2 id="question-index-nbsp-选择题">{{question.index}}. 选择题</h2>
  <p>{{content}}</p>
</section>
</template>
<script>
export default {
  props: ["question"]
}
</script>

최종 효과는 다음과 같습니다(제목 내용 포함).

2. 캐러셀 전환 효과 추가

캐러셀 전환은 일반적으로 모든 슬라이드를 함께 모아 슬라이드를 만드는 것을 의미합니다. 긴 가로 그림을 만든 다음 변경합니다. 이전 jQuery 플러그인 Flipsnap.js와 같은 디스플레이 컨테이너에서 이 가로 이미지의 위치는 부동입니다. 모든 슬라이드를 남겨두고 긴 이미지를 형성한 다음 번역 값을 변경합니다. 이 긴 이미지의 전환 목적을 달성하기 위해. 이 플러그인의 단점은 마지막 그림에서 첫 번째 그림으로 다시 전환할 수 있는 방법이 없다는 것입니다. 이 문제를 해결하는 한 가지 방법은 DOM을 지속적으로 이동하는 것입니다. 전환할 때마다 첫 번째 그림을 마지막 그림 뒤로 이동합니다. picture, 그래서 마지막 사진을 클릭하면 첫 번째 사진으로 돌아가는 목적은 달성하지만 이렇게 이리저리 옮기는 것은 성능을 많이 소모하고 별로 우아하지 않습니다. 또 다른 캐러셀 플러그인인 jssor 슬라이더도 모든 슬라이드를 렌더링한 다음 전체 긴 이미지의 위치 대신 전환될 때마다 각 슬라이드의 번역 값을 동적으로 계산하므로 이동할 필요가 없습니다. DOM 노드는 비교적 우아합니다. 위에서 언급한 것과 비슷한 방식으로 구현되는 Vue 캐러셀 플러그인도 많이 있습니다. 어쨌든 위의 캐러셀 모드는 우리 시나리오에 적합하지 않습니다. 그 중 하나는 이러한 종류의 질문 답변 시나리오에서는 각 질문을 완료한 후 다시 돌아갈 수 없다는 것입니다. 더 중요한 것은 모든 슬라이드를 한 번에 렌더링하고 싶지 않기 때문입니다. 예를 들어, img 태그를 src인 경우에는 없음으로 설정하더라도 리소스가 로드됩니다. 일반 URL인 경우 로드를 요청합니다. 슬라이드가 많은 경우가 많기 때문에 이 캐러셀 플러그인은 사용하지 않습니다.

Vue에 포함된 전환을 사용할 수도 있지만 전환의 문제점은 다음 전환을 자르면 이전 전환이 소멸되기 때문에 다음 전환의 애니메이션과 리소스만 있다는 것입니다. 다음 슬라이드를 미리 로드할 수 없습니다. 그래서 수동으로 구현합니다.

我的想法是每次都准备两个slide，第1个slide是当前展示用的，第2个slide拼在它的后面，准备切过来，当第2个slide切过来之后，删掉第1个slide，然后在第2个的后面再接第3个slide，不断地重复这个过程。如果我们没有使用Vue，而是自己增删DOM，那么没什么问题，可以很任性地自己发挥。 使用Vue可以怎么优雅地实现这个功能呢 ？

在上面一个component的基础上，再添加一个component，刚开始第1个component是当前展示的，而第2个component是拼在它右边的，当第2个切过去之后，就把第1个移到第2的后面，同时把内容改成第3个slide的内容，依此类推。使用Vue不太好动态地改DOM，但是可以 借助jssor slider的思想 ，不移动DOM，只是改变component的translate的值。

给其中一个component套一个next-task的类，具有这个类的组件就表示它是下一张要出现的，它需要translateX(100%)，如下代码所示：

<template>
<p id="app">
  <p class="task-container">
    <component :is="&#39;task-&#39; + questions[currentIndex].type" 
      ></component>
    <component :is="&#39;task-&#39; + questions[currentIndex + 1].type" 
      class="next-task"></component>
  </p>
</p>
</template>
 
<style>
.next-task {
  display: none;
  transform: translateX(100%);
  /* 添加一个动画，当改变transform的值时就会触发这个动画 */
  transition: transform 0.5s ease;
}
</style>

上面代码把具有.next-task类的component隐藏了，这样是做个优化，因为display: none的元素只会构建DOM，不会进行layout和render渲染。

所以就把问题转换成怎么在这两个component之间，切换next-task的类。一开始next-task是在第2个，当第2个切过来之后，next-task变成加在第1个上面，这样轮流交替。

进而，发现一个规律，如果currentIndex是偶数话，如o、2、4…，那么next-task是加在第2个component的，而如果currentIndex是奇数，则next-task是加在第1个component的。所以可以根据currentIndex的奇偶性切换。

如下代码所示：

<template>
<p id="app">
  <p class="task-container">
    <component :is="&#39;task-&#39; + questions[evenIndex].type" 
      :class="{&#39;next-task&#39;: nextIndex === evenIndex}"
      ref="evenTask"></component>
    <component :is="&#39;task-&#39; + questions[oddIndex].type" 
      :class="{&#39;next-task&#39;: nextIndex === oddIndex}
      ref="oddTask"></component>
  </p>
</p>
</template>
 
<script>
 
export default {
  name: &#39;App&#39;,
  data() {
    return {
      currentIndex: 0, // 当前显示的index
      nextIndex: 1,  // 表示下一张index，值为currentIndex + 1
      evenIndex: 0,  // 偶数的index，值为currentIndex或者是currentIndex + 1
      oddIndex: 1   // 奇数的index，值同上
    };
  },
}

第1个component用来显示偶数的slide，第2个是用来显示奇数的slide（分别用一个evenIndex和oddIndex代表），如果nextIndex是偶数的，那么偶数的component就会有一个next-task的类，反之则亦然。然后在下一题按钮的响应函数里面改变这几个index的值：

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
      % this.questions.length;
    this._slideToNext();
  },
  // 切到下一步的动画效果
  _slideToNext() {
 
  }
}

nextQuestion函数可能还有其它一些处理，在它里面调一下_slideToNext函数，这个函数的实现如下：

_slideToNext() {
  // 当前slide的类型（currentIndex已经加1了，这里要反一下）
  let currentType = this.currentIndex % 2 ? "even" : "odd",
    // 下一个slide的类型
    nextType = this.currentIndex % 2 ? "odd": "even";
  // 获取下一个slide的dom元素
  let $nextSlide = this.$refs[`${nextType}Task`].$el;
  $nextSlide.style.display = "block";
  // 把下一个slide的translate值置为0，原本是translateX(100%)
  $nextSlide.style.transform = "translateX(0)";
  // 等动画结束后更新数据
  setTimeout(() => {
    this.nextIndex = (this.currentIndex + 1) 
      % this.questions.length;
    // 原本的next是当前显示的slide
    this[`${nextType}Index`] = this.currentIndex;
    // 而原本的current slide要显示下下张的内容了
    this[`${currentType}Index`] = this.nextIndex;
  }, 500);
}

代码把下一个slide的display改成block，并把它的translateX的值置为0，这个时候不能马上更新数据触发DOM更新，要等到下一个slide移过去的动画结束之后再开始操作，所以加了一个setTimeout，在回调里面调换nextTask的类，加到原本的current slide，并把它的内容置成下下张的内容。这些都是通过改变相应的index完成的。

这样基本上就完成了，但是我们发现一个问题，切是切过去了，就是没有动画效果。这个是因为从display: none变到display: block是没有动画的，要么改成visibility: hidden到visible，要么触发动画的操作加到$nextTick或者setTimeout 0里面，考虑到性能问题，这里使用第二种方案：

$nextSlide.style.display = "block";
// 这里使用setimeout，因为$nextTick有时候没有动画，非必现
setTimeout(() => {
  $nextSlide.style.transform = "translateX(0)";
  // ...
}, 0);

经过这样的处理之后，点下一题就有动画了，但是又发现一个问题，就是偶数的next-task会被盖住，因为偶数的是使用第一个component，它是会被第二个compoent盖住的，所以需要给它加一个z-index：

.next-task { 
  display: none;
  transform: translateX(100%);
  transition: transform 0.5s ease;
  z-index: 2;
}

这个问题还比较好处理，另外一个不太好处理的问题是：动画的时间是0.5s，如果用户点下一题的速度很快在0.5s之内，上面的代码执行就会有问题，会导致数据错乱。如果每次切到下一题之后按钮初始化都是disabled，因为当前题还没答，只有答了才能变成可点状态，可以保证0.5s的时间是够的，那么就可以不用考虑这种情况。但是如果需要处理这种情况呢？

3. 解决点击过快的问题

我想到两个方法，第一个方法是用一个sliding的变量标志当前是否是在进行切换的动画，如果是的话，点击按钮的时候就直接更新数据，同时把setTimeout 0.5s的计时器清掉。这个方法可以解决数据错乱的问题，但是切换的效果没有了，或者是切换到一半的时候突然就没了，这样体验不是很好。

第二个方法是延后切换，即如果用户点击过快的时候，把这些操作排队，等着一个个做切换的动画。

我们用一个数组表示队列，如果当前已经在做滑动的动画，则入队暂不执行动画，如下代码所示：

methods: {
  nextQuestion() {
    this.currentIndex = (this.currentIndex + 1) 
      % this.questions.length;
    // 把currentIndex插到队首
    this.slideQueue.unshift(this.currentIndex);
    // 如果当前没有滑动，则执行滑动
    !this.sliding && this._slideToNext();
  },
}

每次点击按钮都把待处理的currentIndex插到队列里面，如果当前已经在滑动了，则不立刻执行，否则执行滑动_slideToNext函数：

_slideToNext() {
  // 取出下一个要处理的元素
  let currentIndex = this.slideQueue.pop();
  // 下一个slide的类型
  let nextType = currentIndex % 2 ? "odd" : "even";
  let $nextSlide = this.$refs[`${nextType}Task`].$el;
  $nextSlide.style.display = "block";
  setTimeout(() => {
    $nextSlide.style.transform = "translateX(0)";
    this.sliding = true;
    setTimeout(() => {
      this._updateData(currentIndex);
      // 如果当前还有未处理的元素，
      // 则继续处理即继续滑动
      if (this.slideQueue.length) {
        // 要等到两个component的DOM更新了
        this.$nextTick(this._slideToNext);
      } else {
        this.sliding = false;
      }
    }, 500);
  }, 0);
},

这个函数每次都先取出当前要处理的currentIndex，然后接下来的操作和第2点提到的一样，只是在0.5s动画结束后的异步回调里面需要判断一下，当前队列是否还有未处理的元素，如果有的话，需要继续执行_slideToNext，直到队列空了。这个执行需要挂在nextTick里面，因为需要等到两个component的DOM更新了才能操作。

这样理论上就没问题了，但实际上还是有问题，感受如下：

我们发现有些slide没有过渡效果，而且不是非必现的，没有规律。经过一番排查，发现如果把上面的nextTick改成setTimeout情况就会好一些，并且setTimeout的时间越长，就越不会出现失去过渡效果的情况。但是这个不能从根本上解决问题，这里的原因应该是Vue的自动更新DOM和transition动画不是很兼容，有可能是Vue的异步机制问题，也有可能是JS结合transition本身就有问题，但以前没有遇到过，具体没有深入排查。不管怎么样，只能放弃使用CSS的transition做动画。

如果有使用jQuery的话，可以使用jQuery的animation，如果没有的话，那么可以使用原生dom的animate函数，如下代码所示：

_slideToNext(fast = false) {
  let currentIndex = this.slideQueue.pop();
  // 下一个slide的类型
  let nextType = currentIndex % 2 ? "odd" : "even";
  // 获取下一个slide的dom元素
  let $nextSlide = this.$refs[`${nextType}Task`].$el;
  $nextSlide.style.display = "block";
  this.sliding = true;
  // 使用原生animate函数
  $nextSlide.animate([
    // 关键帧
    {transform: "translateX(100%)"},
    {transform: "translateX(0)"}
  ], {
    duration: fast ? 200 : 500,
    iteration: 1,
    easing: "ease"
  // 返回一个Animate对象，它有一个onfinish的回调
  }).onfinish = () => {
    // 等动画结束后更新数据
    this._updateData(currentIndex);
    if (this.slideQueue.length) {
      this.$nextTick(() => {
        this._slideToNext(true);
      });
    } else {
      this.sliding = false;
    }
  };
},

使用animate函数达到了和transition同样的效果，并且还有一个onfinish的动画结束回调函数。上面代码还做了一个优化，如果用户点得很快的时候，缩短过渡动画的时间，让它切得更快一点，这样看起来更自然一点。使用这样的方式，就不会出现transition的问题了。最后的效果如下：