当前位置: 首页 > news >正文

vue动画、过渡效果

vue动画、过渡效果

  • 一.动画
  • 二.过渡
  • 三.多个元素过渡
  • 四.第三方库的使用
  • 五.总结

一.动画

在这里插入图片描述
1.默认.v-enter-active/.v-leave-active,
如果有name则.name-enter-active/.name-leave-active
2.appear意思是一打开页面就 实现动画,是appear="true"的简写

在这里插入图片描述

二.过渡

在这里插入图片描述

三.多个元素过渡

transition标签改为transition-group ,每个过渡的元素要有key值
在这里插入图片描述

四.第三方库的使用

animate.css
可以在npm官网中搜索
1.安装插件

npm install animate.css --save

2.引入

import 'animate.css';

在这里插入图片描述

五.总结

在这里插入图片描述
在这里插入图片描述

http://www.lryc.cn/news/424819.html

相关文章:

  • 在 Vue 3 项目中使用 Element UI Plus <el-calendar>组件与时区处理
  • 【系统架构设计】计算机网络
  • 《中国数据库前世今生》——历史的深度与未来的展望
  • web前端之实现霓虹灯背景魔术卡、旋转的背景动画、模糊效果、边框、变量、filter
  • 几款免费的时序数据库对比
  • 基于springboot的乐享田园系统
  • 深入解析Objective-C中NSParagraphStyle的段落样式处理艺术
  • Qt编程技巧小知识点(2)GPIB缓存区数据读取
  • 数的个位相加
  • 专业技能(挖坑填坑)——MYSQL的索引、日志、事务、存储引擎、锁机制等相关原理
  • C++(27): 线程池
  • 每日一题-贪心算法
  • PSO 算法实例(手动推导过程)
  • 解决antd TreeSelect 返回值不包含父节点问题 -自定义组件(react)
  • 花四小时,写了个在线实时绘制等值面图小软件,明晚上线,喜欢的小伙伴关注哦
  • c++的vector用法
  • 【Linux网络】Linux网络初探:开启网络世界的大门
  • 目录、用户与组、出错相关函数、时间函数
  • <keep-alive> 一分钟了解
  • Android 启动动画太生硬
  • 深度学习中常用概念总结
  • 进 程
  • Taro-UI
  • TypeScript 之 JavaScript文件类型检查
  • 基本数据类型变量间的自动提升与强制转换以及进制的转换
  • SparseConv 的学习笔记
  • vscode 快速生成vue 格式
  • react笔记:redux
  • 数据结构与算法--图的应用
  • 【leetcode图文详解】特殊数组II : 空间换时间的“记忆化”,越多越好吗?