vue过渡动画实战

简介: 系列

transition过渡&动画

API

使用

需要设置动画的元素或组件要在外边包裹一个<transition>标签,设置自定义的name,vue会根据元素的切换(进入/离开)过程添加相应的css类名,你可以自由地使用css类名来设置css过渡&动画

过渡的类名

在进入/离开的过渡中,会有 6 个 class 切换。

各类名的生命周期

  • 进入

    • v-enter 只存在于第一帧
    • v-enter-active 第一帧到最后一帧,结束后移除
    • v-enter-to 第二帧到最后一帧,结束后移除
  • 离开

    • v-leave 只存在于第一帧
    • v-leave-active 第一帧到最后一帧,结束后移除
    • v-leave-to 第二帧到最后一帧,结束后移除

如果你使用一个没有name<transition> ,则 v- 是这些类名的默认前缀。如果你使用了name="fade",那么 v- 前缀会替换为 fade-

css过渡 demo

See the Pen vue的过渡动画 by xugaoyi (@xugaoyi) on CodePen.

css动画 demo

See the Pen vue的动画 by xugaoyi (@xugaoyi) on CodePen.

组件中使用的示例

<template>
    <transition name="slide">
         <div class="add-song">
             ...
        </div>
    </transition>    
<template>
 .add-song
    &.slide-enter-active, &.slide-leave-active
      transition: all 0.3s
    &.slide-enter, &.slide-leave-to
      transform: translate3d(100%, 0, 0)
相关文章
|
1天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
6 2
|
1天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
7 3
|
1天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
11 2
|
1天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
8 2
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
8 2
|
前端开发 JavaScript
初识 Vue(24)---(Vue 中同时使用过渡和动画)
Vue 中同时使用过渡和动画 在上篇博客 《Vue 中使用 animate.css 库》基础上开始这篇博客 在上篇博客中,完成了 引入 animate.
1217 0
|
前端开发 内存技术
Vue_同时使用过渡和动画
在上一节我们用animate动画库,在刷新页面时没有动画 如何解决第一次就显示动画内容呢? 在transform 上加上appear 和appear-active-class <transition name='fade' appear enter-active-class='animate.
1537 0
|
7天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
22 1
|
23小时前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
14 0
|
1天前
|
JavaScript 网络架构
Vue中三个点(...)的意思
**孤立元素**:通过扩展运算符(`...`)可以将数组元素打印出来,如 `console.log(...iArray)`。 - **添加元素**:可以使用扩展运算符结合数组合并来添加元素,例如 `[&#39;0&#39;, ...iArray, &#39;4&#39;]` 或者使用 `push` 方法。 - **删除元素**:通过解构赋值取出数组第一个元素,如 `const [first, ...last] = arr`。 - **数组合并**:可以使用扩展运算符将多个数组合并,如 `[...arr1, ...arr2]`。
5 0