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

Vue前端开发:animate.css第三方动画库

在实际的项目开发中,如果自定义元素的动画,不仅效率低下,代码量大,而且还存在浏览器的兼容性问题,因此,可以借助一些优秀的第三动画库来协助完成动画的效果,如animate.css和gsap动画库,前者使用样式,后者通过JavaScript来实现动画效果。今天先给大家分享animate.css知识,如果有所帮助,大家点点关注支持一下,也可以联系上我一起学习。
animate.css是一个使用CSS样式实现动画效果的第三方库文件,它包含各类动画效果,如强调、切换和引导等,同时,它能很好地兼容各大浏览器,可以很方便地快速运用到各个Web项目中,在使用animate.css动画库之前,需要先在在项目文件夹下,输入如下指令。

npm install animate 

安装成功后,在需要使用该动画效果的组件中导入该库文件,代码如下。

import "animate.css"; 

导入成功后,就可以在组件的模板元素中,使用动画库的类别样式了,接下来通过一个示例来演示animate.css 库在组件中的使用过程。
实例5-4 应用动画库中样式

1. 功能描述

在上述示例5-1的基础上,当单击按钮时,通过应用第三方动画的样式,实现元素以反弹跳跃的方式隐藏,以上下摇摆的方式显示。

2. 实现代码

在项目components 文件夹的ch5子文件夹中,添加一个名为“PlugAnimate”的.vue文件,在文件中加入如清单5-4所示代码。

代码清单5-4 PlugAnimate.vue代码

<template><div class="action"><div class="act"><input type="button" @click="startTrans()" :value="blnShow ? '隐藏动画' : '显示动画'"></div><transition name="animate__animated animate__bounce"enter-active-class="animate__swing"leave-active-class="animate__backOutUp"><div class="mytrans" v-if="blnShow"></div></transition></div>
</template><script>
import "animate.css";
export default {name: "PlugAnimate",data() {return {blnShow: true};},methods: {startTrans() {this.blnShow = !this.blnShow;}},
};
</script>
<style>
.action .act {margin: 10px 0;
}.action .act input {width: 80px;height: 32px;
}.mytrans {width: 200px;height: 30px;background-color: #ccc;
}
</style>

3. 页面效果

保存代码后,页面在Chrome浏览器下执行的页面效果如图5-5所示。
在这里插入图片描述

4. 源码分析

在上述示例的代码中,首先向动画组件添加两个动画名称,分别是animate__animated和 animate__bounce,前者是一个类似于全局变量,它定义了动画的持续时长;后者则是一个动画具体的效果名称,示例中的bounce为反弹效果,

然后再设置动画进入和离开时的类别样式animate__swing和animate__backOutUp,通过这些动画样式,实现需求中的动画效果,由于animate.css库是开源的,安装后就已下载到本地文件中,如果需要修改某个动画效果,也可以找到源文件,直接修改相应样式代码。
在这里插入图片描述

相关文章:

Vue前端开发:animate.css第三方动画库

在实际的项目开发中&#xff0c;如果自定义元素的动画&#xff0c;不仅效率低下&#xff0c;代码量大&#xff0c;而且还存在浏览器的兼容性问题&#xff0c;因此&#xff0c;可以借助一些优秀的第三动画库来协助完成动画的效果&#xff0c;如animate.css和gsap动画库&#xff…...

Java中的I/O模型——BIO、NIO、AIO

1. BIO&#xff08;Blocking I/O&#xff09; 1. 1 BIO&#xff08;Blocking I/O&#xff09;模型概述 BIO&#xff0c;即“阻塞I/O”&#xff08;Blocking I/O&#xff09;&#xff0c;是一种同步阻塞的I/O模式。它的主要特点是&#xff0c;当程序发起I/O请求&#xff08;比如…...

【软考知识】敏捷开发与统一建模过程(RUP)

敏捷开发模式 概述敏捷开发的主要特点包括&#xff1a;敏捷开发的常见实践包括&#xff1a;敏捷开发的优势&#xff1a;敏捷开发的挑战&#xff1a;敏捷开发的方法论&#xff1a; ScrumScrum 的核心概念Scrum 的执行过程Scrum 的适用场景 极限编程&#xff08;XP&#xff09;核…...

Redis常见面试题(二)

Redis性能优化 Redis性能测试 阿里Redis性能优化 使用批量操作减少网络传输 Redis命令执行步骤&#xff1a;1、发送命令&#xff1b;2、命令排队&#xff1b;3、命令执行&#xff1b;4、返回结果。其中 1 与 4 消耗时间 --> Round Trip Time&#xff08;RTT&#xff0c;…...

业务模块部署

一、部署前端 1.1 window部署 下载业务模块前端包。 &#xff08;此包为耐威迪公司发布&#xff0c;请联系耐威迪客服或售后获得&#xff09; 包名为&#xff1a;业务-xxxx-business &#xff08;注&#xff1a;xxxx为发布版本号&#xff09; 此文件部署位置为&#xff1a;……...

【LeetCode】【算法】48. 旋转图像

LeetCode 48. 旋转图像 题目描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 思路 思路&#xff1a;再次拜见K神&#xf…...

【STM32F1】——9轴姿态模块JY901与串口通信(上)

【STM32F1】——9轴姿态模块JY901与串口通信(上) 一、简介 本篇主要对调试JY901模块的过程进行总结,实现了以下功能。 串口普通收发:使用STM32F103C8T6的USART2实现9轴姿态模块JY901串口数据的读取,并利用USART1发送到串口助手。 串口DMA收发:使用STM32F103C8T6的USART…...

Docker网络概述

1. Docker 网络概述 1.1 网络组件 Docker网络的核心组件包括网络驱动程序、网络、容器以及IP地址管理&#xff08;IPAM&#xff09;。这些组件共同工作&#xff0c;为容器提供网络连接和通信能力。 网络驱动程序&#xff1a;Docker支持多种网络驱动程序&#xff0c;每种驱动程…...

Vite与Vue Cli的区别与详解

它们的功能非常相似&#xff0c;都是提供基本项目脚手架和开发服务器的构建工具。 主要区别 Vite在开发环境下基于浏览器原生ES6 Modules提供功能支持&#xff0c;在生产环境下基于Rollup打包&#xff1b; Vue Cli不区分环境&#xff0c;都是基于Webpack。 在生产环境下&…...

深究JS底层原理

一、JS中八种数据类型判断方法 在JavaScript中&#xff0c;数据类型分为两大类&#xff1a;基本&#xff08;原始&#xff09;数据类型和引用&#xff08;对象&#xff09;数据类型。 基本数据类型&#xff08;Primitive Data Types&#xff09; 基本数据类型是表示简单的数…...

数据分析-41-时间序列预测之机器学习方法XGBoost

文章目录 1 时间序列1.1 时间序列特点1.1.1 原始信号1.1.2 趋势1.1.3 季节性和周期性1.1.4 噪声1.2 时间序列预测方法1.2.1 统计方法1.2.2 机器学习方法1.2.3 深度学习方法2 XGBoost2.1 模拟数据2.2 生成滞后特征2.3 切分训练集和测试集2.4 封装专用格式2.5 模型训练和预测3 参…...

json转java对象 1.文件读取为String 2.String转为JSONObject 3.JSONObject转为Class

一.参考王广帅的 服务器起服时的加载 private void readConfigFile(String configDir, Class<?> clazz) throws Exception {String fileName getConfigFileName(clazz);File configFile new File(configDir, fileName);// 读取所有的行&#xff0c;因此&#xff0c;应…...

基于卷积神经网络的农作物病虫害识别系统(pytorch框架,python源码)

更多图像分类、图像识别、目标检测等项目可从主页查看 功能演示&#xff1a; 基于卷积神经网络的农作物病虫害检测&#xff08;pytorch框架&#xff09;_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于卷积神经网络的农作物病虫害识别系统是在pytorch框架下实现的…...

ETLCloud异常问题分析ai功能

在数据处理和集成的过程中&#xff0c;异常问题的发生往往会对业务运营造成显著影响。为了提高ETL&#xff08;提取、转换、加载&#xff09;流程的稳定性与效率&#xff0c;ETLCloud推出了智能异常问题分析AI功能。这一创新工具旨在实时监测数据流动中的潜在异常&#xff0c;自…...

【1】 Kafka快速入门-从原理到实践

文章目录 🔍 一、引言📜 二、Kafka 的历史🏗️ 三、Kafka 的核心结构🖥️ (一)Broker📋 (二)Topic📄 (三)Partition📤 (四)Producer📥 (五)Consumer🐒 (六)Zookeeper💡 四、Kafka 的重点概念📨 (一)消息📏 (二)偏移量(Offset)🔄 (…...

go语言中的map类型详解

在Go语言中&#xff0c;map是一种内建的数据结构&#xff0c;提供了键值对&#xff08;key-value&#xff09;的存储方式。map通常用于实现快速的查找和关联数组&#xff0c;适合在需要根据键来高效查找值的场景下使用。 基本概念 map是一个无序的集合&#xff0c;它存储了键…...

GBase 8a MPP Cluster V9安装部署

GBase 8a MPP Cluster V9安装部署 安装环境准备 节点角色操作系统地址配置GBASE版本gbase01.gbase.cnGCWARE,COOR,DATACentOS 7.9192.168.20.1422C4GGBase 8a MPP Cluster V9 9.5.3.28.12gbase02.gbase.cnGCWARE,COOR,DATACentOS 7.9192.168.20.1432C4GGBase 8a MPP Cluster …...

静态库、动态库、framework、xcframework、use_frameworks!的作用、关联核心SDK工程和测试(主)工程、设备CPU架构

1.1库的概念 库&#xff1a;程序代码的集合&#xff0c;编译好的二进制文件加上头文件供使用&#xff0c;共享程序代码的一种方式。 1.2库的分类 根据开源情况分为&#xff1a;开源库&#xff08;能看到具体实现&#xff09;、闭源库&#xff08;只公开调用的的接口&#xf…...

C++ | Leetcode C++题解之第552题学生出勤记录II

题目&#xff1a; 题解&#xff1a; class Solution { public:static constexpr int MOD 1000000007;vector<vector<long>> pow(vector<vector<long>> mat, int n) {vector<vector<long>> ret {{1, 0, 0, 0, 0, 0}};while (n > 0) {…...

网站架构知识之Ansible(day020)

1.Ansible架构 Inventory 主机清单:被管理主机的ip列表,分类 ad-hoc模式: 命令行批量管理(使用ans模块),临时任务 playbook 剧本模式: 类似于把操作写出脚本,可以重复运行这个脚本 2.修改配置 配置文件&#xff1a;/etc/ansible/ansible.cfg 修改配置文件关闭主机Host_key…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...