备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【Vue3从零开始-第四章】4-2 vue的动画标签transition（上）

2022-09-26 301
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3从零开始-第四章】4-2 vue的动画标签transition（上）

]UWOD(KIB9LJS9~S[T{QHM9.png


前言


在上一篇的文章中，我们了解了vue里面对CSS动画效果的一个处理，本章节主要就是使用transition标签来实现单元素组件的过渡和动画效果。


单元素入场出场过渡效果


在以前的文章中，我们写过v-if和v-show指令去控制某个元素的显示隐藏，那么这个元素就是一个单元素效果了。


<script>
  const app = Vue.createApp({
    data(){
      return {
        show: false
      }
    },
    methods: {
      handleClick(){
        this.show = !this.show
      }
    },
    template: `
      <div>
        <div v-if="show">Hello World</div>
        <button @click="handleClick">切换</button>
      </div>
    `
  });
  const vm = app.mount('#root');
</script>
复制代码


A88B}1%SH7RXR4{MR721`TU.png


现在这样的效果还只是简单的显示隐藏的效果，如果要进行动画效果呢，可以使用vue里面的一个transition标签。


template: `
  <div>
    <transition>
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`
复制代码


直接在div标签外面包一层transition标签，写完标签之后打开浏览器肯定是没有效果的，这时候我们就要去写一些样式了。


<style>
    .v-enter-from{
      opacity: 0;
    }
    .v-enter-active{
      transition: opacity 3s ease-out;
    }
    .v-enter-to{
      opacity: 1;
    }
</style>


  • v-enter-from表示入场时最初的效果是透明度为0


  • v-enter-to表示入场效果执行完成之后最终的透明度为1


  • v-enter-active表示动画执行的过程，执行opacity样式三秒，并用ease-out的效果


C3V09[3ZJPD28$~{S]LLCR6.png


在浏览器中可以看出，点击切换按钮时，入场效果已经执行了，但是出场的时候却没有效果，那接下来就该完善一下出场效果的代码了。


.v-leave-from{
  opacity: 1;
}
.v-leave-active{
  transition: opacity 3s ease-in;
}
.v-leave-to{
  opacity: 0;
}


  • v-leave-from表示出场时最初的效果是透明度为1
  • v-leave-to表示出场效果执行完成之后最终的透明度为0
  • v-leave-active表示动画执行的过程，执行opacity样式三秒，并用ease-in的效果


2]}LKRXQ8M6W%E1%RA`PBMJ.png


以上的样式名称都是vue里面transition标签样式的固定写法，写错了是不会执行的哦。


通过transition标签，并配合一些固定的样式名，就可以很好的实现单元素淡入淡出的过渡效果了。


由于入场动画结束时和出场动画初始化时的效果是一样的，而动画执行过程也可以写成一样的，所以样式代码是可以精简一下的。


<style>
    .v-enter-from{
      opacity: 0;
    }
    .v-enter-active, .v-leave-active{
      transition: opacity 3s ease-out;
    }
    .v-enter-to{
      opacity: 1;
    }
    .v-leave-to{
      opacity: 0;
    }
</style>


单元素动画效果


实现一个简单的位移动画效果就比较简单了，只需要定义一个keyframes的位移动画效果，然后使用v-enter-active和v-leave-active定义动画名称和时长。


<style>
    @keyframes shake {
      0% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-50px);
      }
      100% {
        transform: translateX(50px);
      }
    }
    .v-enter-active, .v-leave-active{
      animation: shake 2s;
    }
</style>
复制代码


7%24I013@Y~SF3H]HDHVJJK.png


属性name


在上面的过渡效果和动画效果中，我们使用的class名称都是固定以v开头的写法，其实这个是可以自定义的，可以通过transition标签中的name属性。


template: `
  <div>
    <transition name="juejin">
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`
复制代码


比如我们将name属性值改为juejin，那么在定义class样式的时候，就要将v也改成juejin开头了。


<style>
    .juejin-enter-from{
      opacity: 0;
    }
    .juejin-enter-active{
      transition: opacity 3s ease-out;
    }
    .juejin-enter-to{
      opacity: 1;
    }
</style>
复制代码


  • 由于这个定义了没什么太大的用处，而且写起来也麻烦，所以name属性在一般应用场景是不推荐修改的。


属性class


transition标签中，除了可以自定义name属性之外，还可以自定义class属性，通过class属性可以完全修改样式名称。


template: `
  <div>
    <transition
      enter-active-class="hello"
      leave-active-class="bye">
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`
复制代码


  • enter-active-class绑定值为hello


  • leave-active-class绑定值为bye


<style>
    @keyframes shake {
      0% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-50px);
      }
      100% {
        transform: translateX(50px);
      }
    }
    .hello, .bye{
      animation: shake 1s;
    }
</style>
复制代码


  • 样式中的名称也要对应的修改为hello和bye


ZT%$C$TG6NL608ZXFZ2}T~9.png


由于我们在样式中给的是 1秒的执行时长，所以看起来会快一些。


除了enter-active-class和leave-active-class之外，其他的出场入场效果都可以自定义class。


  • enter-form-class


  • enter-to-class


  • leave-from-class


  • leave-to-class


使用属性class可以更好的实现一些复杂的动画效果，也可以直接引用第三方库。


第三方库


在这个动画效果animate.style第三方库中，有很多动画效果，无需自己去实现，直接引用CDN，然后在transition标签中的class上就可以直接使用了。


// CDN链接
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
复制代码
template: `
  <div>
    <transition
      enter-active-class="animate__animated animate__bounce"
      leave-active-class="animate__animated animate__flash">
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`
复制代码


4UN0JG4W%%YG~@8IBRW}47R.png


通过给enter-active-class和leave-active-class自定义第三方库中的样式名之后，页面上就会很快的渲染出对应的动画效果了。


{2MHFEMND[`U`FKUX1G9HGM.png


更多效果可以在第三方库的右侧导航栏中点击，页面logo就可以出现对应的动画效果了。


总结


本篇文章主要讲解了transition标签实现单元素过渡效果和动画效果，还讲解了该标签的name和class属性，额外带了一段第三方库的实现效果，大家可以多试试哦。

文章标签：
JavaScript
前端开发
CDN
关键词：
vue VUE.js
动画VUE.js
vue3 vue VUE.js
VUE.js vue3
vue动画VUE.js
蜡笔小心_
目录
相关文章
渐暖
|
1天前
|
缓存 JavaScript
【vue】如何搭建拦截器和设置路由守卫（基于token认证）
【vue】如何搭建拦截器和设置路由守卫（基于token认证）
渐暖
9 0
渐暖
|
1天前
|
JavaScript
Vue 如何新建一个项目（如何安装依赖）
Vue 如何新建一个项目（如何安装依赖）
渐暖
7 0
桃李春风一杯酒
|
1天前
|
资源调度 JavaScript 开发者
插件使用：扩展Vue功能与第三方插件
【4月更文挑战第23天】Vue凭借其轻量级和灵活性在Web开发中备受青睐，而插件则进一步增强了其功能。本文探讨了如何在Vue项目中选择、安装、配置和管理插件，以适应不同需求。要点包括：选择可靠且兼容的插件，使用npm或yarn安装，根据文档配置，以及注意性能影响。明智使用插件能提升开发效率，但需避免过度依赖，确保与项目目标和技术栈匹配。不断学习新插件，可保持技术领先并优化项目实践。
桃李春风一杯酒
9 0
小周sir
|
2天前
|
设计模式 JavaScript 前端开发
Vue源码学习需要哪些工具和技能
【4月更文挑战第20天】学习Vue源码需具备的工具与技能：VS Code或WebStorm作为代码编辑器，Node.js与npm管理依赖，Git操作仓库。基础包括JavaScript、ES6+语法、前端知识（HTML/CSS/浏览器原理）及Vue基础知识。进阶则需源码阅读理解能力，调试技巧，熟悉设计模式和架构思想。学习方法强调系统学习、实践与持续关注Vue最新动态。
小周sir
17 8
小周sir
|
2天前
|
JavaScript 前端开发 编译器
Vue 源码学习路线
【4月更文挑战第20天】探索Vue源码涉及响应式系统、虚拟DOM、模板编译等核心概念。先掌握Vue基础知识、JavaScript（ES6+）和前端工程化。从源码入口文件开始，研究响应式、虚拟DOM、模板编译、实例方法、全局API及生命周期。理解编译器和渲染器工作原理，实践编写Vue插件，参与开源项目，阅读相关文章教程，持续关注Vue最新动态。这是一个循序渐进、需要耐心和实践的过程。
小周sir
8 1
梦中千秋
|
2天前
|
JavaScript 前端开发
鼠标监视 | 拖拽方块 | Vue
鼠标监视 | 拖拽方块 | Vue
梦中千秋
7 0
梦中千秋
|
2天前
|
JavaScript
Vue控制是否禁用disabled属性
Vue控制是否禁用disabled属性
梦中千秋
10 1
梦中千秋
|
2天前
|
JavaScript 前端开发
Vue鼠标悬浮切换图片
Vue鼠标悬浮切换图片
梦中千秋
12 0
桃李春风一杯酒
|
2天前
|
JavaScript 前端开发 内存技术
Vue入门：构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程：安装 Node.js 和 npm，使用 Vue CLI (`npm install -g @vue/cli`) 创建项目，选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件，显示数据属性。在 `App.vue` 中引入并注册组件，启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅！
桃李春风一杯酒
8 2
桃李春风一杯酒
|
2天前
|
JavaScript 前端开发 UED
动画效果：给 Vue 应用添加过渡和动画
【4月更文挑战第22天】Vue 框架提供强大的过渡和动画功能，增强用户体验，创建流畅的用户界面。通过CSS动画、设置过渡属性和自定义过渡，开发者能实现多样化效果。同时，结合组件状态、关注性能并测试优化，确保在不同设备上运行良好，打造引人入胜的应用交互。
桃李春风一杯酒
8 2