22.vue学习篇-过渡&动画

问题：在JS里面实现元素的过渡动画，有哪几种思路？

        1. JS操作style，transition: all 1s ease(缓动随意)

        2. JS操作className，切换类名-[在不用第三方库的时候，最推荐这个方法，vue源码也是用的这个方法实现]

                vue源码中，通过这个方法实现

                transitionstart方法，transitionend方法，监听过渡是否完成

        3. JS代码，结合requestAnimationFrame

        4. 结合第三方库，比较多的用gsap，velocity.js类库

一、transtion

1.基本用法

1.包裹元素

• 使用<transition>标签包裹需要添加过渡效果的元素。例如：

• <transition>
      <div v-if="show">Hello World</div>
  </transition>

• 在这个例子中，当show变量为true时，<div>元素会被显示，<transition>会为这个元素的出现和消失添加过渡效果。

2.命名过渡

• 可以为<transition>添加name属性来命名过渡。这在需要为不同的过渡效果设置不同的类名时非常有用。例如：

  <transition name="fade">
      <div v-if="show">Hello world</div>
  <transition>

• 在这个例子中，当show变量为true时，<div>元素会被显示，<transition>会为这个元素的出现和消失添加过渡效果。

2.过渡类名

1.v-enter：

• 在元素插入之前生效。可以设置元素的初始样式，例如透明度为 0。

2.v-enter-active：

• 在元素插入过程中生效。可以设置过渡效果的属性，例如设置过渡时间、动画函数等。

3.v-enter-to：

• 在元素插入完成后生效。可以设置元素的最终样式，例如透明度为 1。

4.v-leave：

• 在元素移除之前生效。可以设置元素的初始样式，例如透明度为 1。

5.v-leave-active：

• 在元素移除过程中生效。可以设置过渡效果的属性，例如设置过渡时间、动画函数等。

6.v-leave-to：

• 在元素移除完成后生效。可以设置元素的最终样式，例如透明度为 0。

  // 例如，使用 CSS 实现一个淡入淡出的过渡效果：
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

3.钩子函数

1.@before-enter：

• 在元素插入之前调用。可以在这个钩子函数中设置元素的初始状态。

2.@enter

• 在元素插入过程中调用。可以在这个钩子函数中执行过渡效果的动画逻辑。

3.@after-enter

• 在元素插入完成后调用。可以在这个钩子函数中执行一些后续操作，例如清除过渡状态。

4.@enter-cancelled

• 在过渡被中断时调用。例如，当元素的显示条件在过渡过程中发生变化时，过渡会被中断。

5.@before-leave

• 在元素移除之前调用。可以在这个钩子函数中设置元素的初始状态。

6.@leave

• 在元素移除过程中调用。可以在这个钩子函数中执行过渡效果的动画逻辑。

7.@after-leave

• 在元素移除完成后调用。可以在这个钩子函数中执行一些后续操作，例如清除过渡状态。

8.@leave-cancelled

• 在过渡被中断时调用。例如，当元素的隐藏条件在过渡过程中发生变化时，过渡会被中断。

// html
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
  <div v-if="show">Hello World</div>
</transition>

// js
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      const duration = 500;
      const start = Date.now();
      const opacity = +el.style.opacity;
      const tick = () => {
        const elapsed = Date.now() - start;
        el.style.opacity = elapsed / duration + opacity;
        if (elapsed < duration) {
          requestAnimationFrame(tick);
        } else {
          done();
        }
      };
      tick();
    },
    afterEnter(el) {
      el.style.opacity = 1;
    }
  }
};

4.应用场景

1.页面切换

• 可以为页面之间的切换添加过渡效果，提高用户体验。例如，在单页应用中，当用户切换页面时，可以使用<transition>为页面的切换添加淡入淡出的效果。

2.元素显示和隐藏

• 可以为元素的显示和隐藏添加过渡效果，使得界面更加流畅。例如，当用户点击按钮显示或隐藏一个元素时，可以使用<transition>为这个元素的出现和消失添加过渡效果。

3.列表动画

• 可以为列表的添加、删除和排序等操作添加过渡效果，提高用户体验。例如，当用户添加或删除一个列表项时，可以使用<transition-group>为列表项的添加和删除添加过渡效果。

总之，<transition>是 Vue 中一个非常强大的特性，它可以为元素的插入、更新和移除添加过渡效果，提高用户体验。通过使用过渡类名和钩子函数，可以实现各种自定义的过渡效果。

二、transtionGroup

在 Vue 中，<TransitionGroup>是一个用于为多个元素添加过渡效果的组件。它通常与动态列表渲染一起使用，为列表项的添加、删除和排序等操作添加动画效果。

1.基本用法

1.包裹动态列表

• 使用<TransitionGroup>标签包裹一个动态列表，例如使用v-for渲染的列表。例如：

     <transition-group name="list">
       <div v-for="item in items" :key="item.id">{{ item.name }}</div>
     </transition-group>

• 在这个例子中，<TransitionGroup>会为列表中的每个<div>元素添加过渡效果。当列表项添加、删除或排序时，<TransitionGroup>会自动应用过渡效果。

2.命名过渡

• 可以为<TransitionGroup>添加name属性来命名过渡。这在需要为不同的过渡效果设置不同的类名时非常有用。例如：

     <transition-group name="fade">
       <div v-for="item in items" :key="item.id">{{ item.name }}</div>
     </transition-group>

2.过渡类名

1.v-enter：

• 在元素插入之前生效。可以设置元素的初始样式，例如透明度为 0。

2.v-enter-active：

• 在元素插入过程中生效。可以设置过渡效果的属性，例如设置过渡时间、动画函数等。

3.v-enter-to：

• 在元素插入完成后生效。可以设置元素的最终样式，例如透明度为 1。

4.v-leave：

• 在元素移除之前生效。可以设置元素的初始样式，例如透明度为 1。

5.v-leave-active：

• 在元素移除过程中生效。可以设置过渡效果的属性，例如设置过渡时间、动画函数等。

6.v-leave-to：

• 在元素移除完成后生效。可以设置元素的最终样式，例如透明度为 0。

  // 例如，使用 CSS 实现一个淡入淡出的过渡效果：
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

3.钩子函数

1.@before-enter：

• 在元素插入之前调用。可以在这个钩子函数中设置元素的初始状态。

2.@enter：

• 在元素插入过程中调用。可以在这个钩子函数中执行过渡效果的动画逻辑。

3.@after-enter：

• 在元素插入完成后调用。可以在这个钩子函数中执行一些后续操作，例如清除过渡状态。

4.@enter-cancelled：

• 在过渡被中断时调用。例如，当元素的显示条件在过渡过程中发生变化时，过渡会被中断。

5.@before-leave：

• 在元素移除之前调用。可以在这个钩子函数中设置元素的初始状态。

6.@leave：

• 在元素移除过程中调用。可以在这个钩子函数中执行过渡效果的动画逻辑。

7.@after-leave：

• 在元素移除完成后调用。可以在这个钩子函数中执行一些后续操作，例如清除过渡状态。

8.@leave-cancelled：

• 在过渡被中断时调用。例如，当元素的隐藏条件在过渡过程中发生变化时，过渡会被中断。

  // 例如，使用 JavaScript 实现一个自定义的过渡效果：
  
  // html
  <transition-group name="list" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </transition-group>
  
  // js
  export default {
    data() {
      return {
        items: [
          { id: 1, name: 'Item 1' },
          { id: 2, name: 'Item 2' },
          { id: 3, name: 'Item 3' }
        ]
      };
    },
    methods: {
      beforeEnter(el) {
        el.style.opacity = 0;
      },
      enter(el, done) {
        const duration = 500;
        const start = Date.now();
        const opacity = +el.style.opacity;
        const tick = () => {
          const elapsed = Date.now() - start;
          el.style.opacity = elapsed / duration + opacity;
          if (elapsed < duration) {
            requestAnimationFrame(tick);
          } else {
            done();
          }
        };
        tick();
      },
      afterEnter(el) {
        el.style.opacity = 1;
      }
    }
  };

4.应用场景

1.动态渲染列表

• 可以为动态列表的添加、删除和排序等操作添加过渡效果，提高用户体验。例如，在一个购物车列表中，当用户添加或删除商品时，可以使用<TransitionGroup>为列表项的添加和删除添加过渡效果。

2.无限滚动列表

• 可以为无限滚动列表的加载新数据时添加过渡效果，使得界面更加流畅。例如，当用户滚动到底部加载新数据时，可以使用<TransitionGroup>为新添加的列表项添加过渡效果。

3.树形结构渲染

• 可以为树形结构的展开和折叠等操作添加过渡效果，提高用户体验。例如，在一个文件目录树中，当用户展开或折叠一个文件夹时，可以使用<TransitionGroup>为文件夹中的文件列表添加过渡效果。

总之，<TransitionGroup>是 Vue 中一个非常强大的组件，它可以为多个元素添加过渡效果，特别是在动态列表渲染中非常有用。通过使用过渡类名和钩子函数，可以实现各种自定义的过渡效果。