脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue 过渡和动画

一文搞懂Vue里的过渡和动画

 更新时间：2023年06月18日 16:43:24   作者：前端碎碎念  
在Vue中，过渡和动画是一种用于在组件之间添加平滑过渡效果和动画效果的高级用法，Vue提供了一些内置的过渡和动画功能，同时也支持自定义过渡和动画效果，本文就给大家介绍一些Vue中过渡和动画的高级用法,需要的朋友可以参考下

过渡的 CSS 类名

Vue的过渡功能是通过添加CSS类名来实现过渡效果。在过渡过程中，Vue会根据不同的阶段给元素添加不同的CSS类名，如v-enter、v-enter-active、v-leave、v-leave-active等。适用于需要在组件之间添加平滑过渡效果的场景，如淡入淡出、滑动等。

<template>
  <transition name="fade">
    <p v-if="show">This is a fading element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<style>
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
    }
</style>
<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
};
</script>

条件过渡的 CSS 类名

Vue还支持根据条件动态添加过渡的CSS类名。可以使用:class绑定来根据条件动态添加过渡的CSS类名，适用于根据条件动态切换过渡效果的场景，根据不同的条件添加不同的过渡效果。

<template>
  <transition :name="transitionName">
    <p v-if="show">This is a dynamic transition element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      transitionName: 'fade'
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
      this.transitionName = this.show ? 'slide' : 'fade';
    }
  }
};
</script>

JavaScript 钩子函数

Vue提供了一些JavaScript钩子函数，用于在过渡过程中执行自定义的JavaScript代码。可以使用beforeEnter、enter、afterEnter、beforeLeave、leave、afterLeave等钩子函数来执行自定义的过渡逻辑。适用于需要在过渡过程中执行自定义的JavaScript逻辑的场景，如动态修改元素样式等。

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <p v-if="show">This is a custom transition element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<script>
    export default {
        data() {
            return {
              show: false
            };
          },
        methods() {
            beforeEnter(el) {
              console.log('Before Enter');
              el.style.opacity = 0;
            },
            enter(el, done) {
              console.log('Enter');
              setTimeout(() => {
                el.style.opacity = 1;
                done();
              }, 1000);
            },
            afterEnter(el) {
                console.log('After Enter');
            },
            beforeLeave(el) {
              console.log('Before Leave');
              el.style.opacity = 1;
            },
            leave(el, done) {
              console.log('Leave');
              setTimeout(() => {
                el.style.opacity = 0;
                done();
              }, 1000);
            },
            afterLeave(el) {
              console.log('After Leave');
            },
            toggleShow() {
              this.show = !this.show;
            }
        }
    }
</script>

列表过渡

Vue提供了专门的列表过渡功能，用于在列表中添加过渡效果。可以使用<transition-group>组件来包裹列表项，并使用v-move、v-enter、v-leave等CSS类名来定义列表项的过渡效果。 适用于在列表中添加过渡效果的场景，如列表项的渐显、滑动等过渡效果。

<template>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </transition-group>
  <button @click="addItem">Add Item</button>
</template>
<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    };
  },
  methods: {
    addItem() {
      const newItem = {
        id: Date.now(),
        text: 'New Item'
      };
      this.items.push(newItem);
    }
  }
};
</script>

动态过渡和动画：

Vue支持根据动态数据来触发过渡和动画效果。可以使用动态绑定来根据数据的变化来触发过渡和动画效果。适用于根据动态数据触发过渡和动画效果的场景.

<template>
  <transition :name="transitionName">
    <p v-if="show">This is a dynamic transition element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      transitionName: ''
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
      this.transitionName = this.show ? 'fade' : 'slide';
    }
  }
};
</script>

自定义过渡和动画

Vue允许自定义过渡和动画效果，以满足特定的需求。可以使用<transition>和<transition-group>组件的属性和事件来自定义过渡和动画效果。适用于需要自定义过渡和动画效果的场景，通过自定义CSS样式和JavaScript钩子函数来实现特定的过渡和动画效果。

<template>
  <transition
    name="custom-transition"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <p v-if="show">This is a custom transition element.</p>
  </transition>
  <button @click="toggleShow">Toggle Show</button>
</template>
<style>
.custom-transition-enter-active,
.custom-transition-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
.custom-transition-enter,
.custom-transition-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>
<script>
    export default {
      data() {
        return {
              show: false
          };
      },
      methods: {
         beforeEnter(el) {
              el.style.opacity = 0;
              el.style.transform = 'translateY(20px)';
            },
         enter(el, done) {
              setTimeout(() => {
                el.style.opacity = 1;
                el.style.transform = 'translateY(0)';
                done();
              }, 1000);
            },
         afterEnter(el) {
              // 执行进入后的操作
            },
         beforeLeave(el) {
              // 执行离开前的操作
            },
         leave(el, done) {
          setTimeout(() => {
            el.style.opacity = 0;
            el.style.transform = 'translateY(20px)';
            done();
          }, 1000);
         },
         afterLeave(el) {
          // 执行离开后的操作
         },
         toggleShow() {
          this.show = !this.show;
        }
      }
};
</script>

这些示例涵盖了不同的过渡和动画应用场景，可以根据具体的需求和场景选择适合的示例。

以上就是一文搞懂Vue里的过渡和动画的详细内容，更多关于Vue 过渡和动画的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue2中seo时使用vue-meta-info的方法

    vue2中seo时使用vue-meta-info的方法

    这篇文章主要介绍了vue2中seo时使用vue-meta-info,本文通过实例代码给大家详细讲解，文末给大家补充介绍了vue seo管理 vue-meta-info 动态设置meta和title的相关知识，需要的朋友可以参考下
    2022-10-10
  • vue3使用自定义hooks获取dom元素的问题说明

    vue3使用自定义hooks获取dom元素的问题说明

    这篇文章主要介绍了vue3使用自定义hooks获取dom元素的问题说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue项目创建并引入饿了么elementUI组件的步骤

    vue项目创建并引入饿了么elementUI组件的步骤

    这篇文章主要介绍了vue项目创建并引入饿了么elementUI组件的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 解析如何自动化生成vue组件文档

    解析如何自动化生成vue组件文档

    在我们的印象使用中，vue除了写业务代码没有特别新奇的功能了，今天就来看看如何自动化生成vue组件文档
    2021-06-06
  • 详解使用vue实现tab 切换操作

    详解使用vue实现tab 切换操作

    这篇文章主要介绍了详解使用vue实现tab操作,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 简单学习5种处理Vue.js异常的方法

    简单学习5种处理Vue.js异常的方法

    这篇文章主要介绍了简单学习5种处理Vue.js异常的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
    2019-06-06
  • axios拦截设置和错误处理方法

    axios拦截设置和错误处理方法

    下面小编就为大家分享一篇axios拦截设置和错误处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue动态路由刷新失效以及404页面处理办法

    vue动态路由刷新失效以及404页面处理办法

    作为一个前端新手,项目中遇到权限处理时,通常会采用动态添加路由的方法来实现,下面这篇文章主要给大家介绍了关于vue动态路由刷新失效以及404页面处理办法的相关资料,需要的朋友可以参考下
    2023-11-11
  • Vue源码之rollup环境搭建步骤详解

    Vue源码之rollup环境搭建步骤详解

    这篇文章主要介绍了Vue源码之rollup环境搭建步骤详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • Vue 中 onclick和@click区别解析

    Vue 中 onclick和@click区别解析

    这篇文章主要介绍了Vue 中 onclick和@click区别,简单点说就是onclick 只能触发 js的原生方法,不能触发vue的封装方法,@click 只能触发vue的封装方法,不能触发js的原生方法,需要的朋友可以参考下
    2024-02-02

最新评论