Vue使用Animate.css

这篇具有很好参考价值的文章主要介绍了Vue使用Animate.css。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

说一下Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以了,就是直接目标元素绑定对应的类名就可以实现动画效果,非常方便,库其实也相对简单,使用起来也简单。这里示例就以v3为例了,v2也是一样的

github:https://github.com/animate-css/animate.css 

官网:https://animate.style/ 

首先安装

pnpm add animate.css

引入 

main.js 

import 'animate.css'

使用

接下来就可以正常使用了 

注意:在添加类名的时候,里面所有的动画必须先设置上 animate__animated ,然后再设置对应动画的类名,否则是不会生效的,大家简单看一下源码就能了解

下面是个示例: 

Vue使用Animate.css,前端,vue3,css,vue.js,css,前端 

接下来代码: 文章来源地址https://www.toymoban.com/news/detail-675870.html

<template>
  <div class="main">
    <label for=""><span style="fontSize: 13px;margin-right: 5px;">开启无限轮询</span></label>
    <input v-model="isInfinite" type="checkbox">
    <div class="animates-container">
      <button v-for="animateName in animateNames1" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames2" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames3" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames4" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames5" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames6" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames7" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames8" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames9" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    <div class="animates-container">
      <button v-for="animateName in animateNames10" :key="animateName" @click="setAnimate(animateName)">{{ animateName }}</button>
    </div>
    
    <div class="testAnimate" :class="[`${animationsClass()}`, { 'animate__infinite': isInfinite }]"></div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
let animateNames1 = [
  'bounce',
  'flash',
  'pulse',
  'rubberBand',
  'shakeX',
  'shakeY',
  'headShake',
  'swing',
  'tada',
  'wobble',
  'jello',
  'heartBeat',
]
let animateNames2 = [
  'backInDown',
  'backInLeft',
  'backInRight',
  'backInUp',
  'backOutDown',
  'backOutLeft',
  'backOutRight',
  'backOutUp'
]
let animateNames3 = [
  'bounceIn',
  'bounceInDown',
  'bounceInLeft',
  'bounceInRight',
  'bounceInUp',
  'bounceOut',
  'bounceOutDown',
  'bounceOutLeft',
  'bounceOutRight',
  'bounceOutUp',
]
let animateNames4 = [
  'fadeIn',
  'fadeInDown',
  'fadeInDownBig',
  'fadeInLeft',
  'fadeInLeftBig',
  'fadeInRight',
  'fadeInRightBig',
  'fadeInUp',
  'fadeInUpBig',
  'fadeInTopLeft',
  'fadeInTopRight',
  'fadeInBottomLeft',
  'fadeInBottomRight',
  'fadeOut',
  'fadeOutDown',
  'fadeOutDownBig',
  'fadeOutLeft',
  'fadeOutLeftBig',
  'fadeOutRight',
  'fadeOutRightBig',
  'fadeOutUp',
  'fadeOutUpBig',
  'fadeOutTopLeft',
  'fadeOutTopRight',
  'fadeOutBottomRight',
  'fadeOutBottomLeft'
]
let animateNames5 = ref([
  'flip',
  'flipInX',
  'flipInY',
  'flipOutX',
  'flipOutY'
])
let animateNames6 = ref([
  'lightSpeedInRight',
  'lightSpeedInLeft',
  'lightSpeedOutRight',
  'lightSpeedOutLeft'
])
let animateNames7 = ref([
  'rotateIn',
  'rotateInDownLeft',
  'rotateInDownRight',
  'rotateInUpLeft',
  'rotateInUpRight',
  'rotateOut',
  'rotateOutDownLeft',
  'rotateOutDownRight',
  'rotateOutUpLeft',
  'rotateOutUpRight'
])
let animateNames8 = ref([
  'hinge',
  'jackInTheBox',
  'rollIn',
  'rollOut'
])
let animateNames9 = ref([
  'zoomIn',
  'zoomInDown',
  'zoomInLeft',
  'zoomInRight',
  'zoomInUp',
  'zoomOut',
  'zoomOutDown',
  'zoomOutLeft',
  'zoomOutRight',
  'zoomOutUp'
])
let animateNames10 = ref([
  'slideInDown',
  'slideInLeft',
  'slideInRight',
  'slideInUp',
  'slideOutDown',
  'slideOutLeft',
  'slideOutRight',
  'slideOutUp'
])

let animates = ref([])
let isInfinite = ref(false)

const setAnimate = animateName => {
  animates.value.shift()
  animates.value.push(animateName)
}

const animationsClass = () => {
  if (animates.value.length) {
    return `animate__animated animate__${animates.value[0]}`
  }
  return ''
}
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 40px 0 0 50px;
  box-sizing: border-box;
  overflow: hidden;
}
.main button {
  margin-right: 8px;
  cursor: pointer;
}

.animates-container {
  margin: 20px 0;
}

.main .testAnimate {
  width: 300px;
  height: 300px;
  background-color: red;
  margin: 50px 0 0 10px;
  padding: 30px;
  box-sizing: border-box;
}
</style>

到了这里,关于Vue使用Animate.css的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(53)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(79)
  • 使用CSS3 + Vue3 + js-tool-big-box工具,实现炫酷五一倒计时动效

    时间过得真是飞速,很快又要到一年一度的五一劳动节啦,今年五天假,做好准备了吗?今天我们用 CSS3 + Vue3 + 一个前端工具库 js-tool-big-box 来实现一个炫酷的五一倒计时动效吧。 目录 1  先制作一个CSS3样式 2 Vue3功能提前准备  3 使用js-tool-big-box工具完成倒计时 3.1 安装工具

    2024年04月25日
    浏览(47)
  • Vue3通过JS修改Css样式(附节点获取相关知识)

    方法一:通过获取节点style(获取标签节点) 方法二:通过动态设置class 方法三:直接动态设置style  附节点获取相关知识

    2024年02月16日
    浏览(43)
  • vue3 + Tailwind Css + Vite 搭建快速开发前端样式环境

    一个功能类优先的 CSS 框架,用于快速构建定制的用户界面。这是来自 TailwindCss 官方定义。 中文网站 Tailwindcss 基于原子化理念,将样式重复性代码降到最小,原本开发最大限度基于类名的声明块不重复,现在Tailwindcss基于单独一句声明不重复。 活跃度 github starts 数量达到

    2024年02月04日
    浏览(69)
  • 前端笔记(Css、JS、Vue、UniApp、微信小程序)

    点击穿透 应用场景:点赞或送礼等出现的弹窗遮罩,无法再次触发点击事件 磨砂模糊 底部安全距离 可以放入【common.scss】中,在需要的页面引入 宽度根据内容决定 媒体查询@media 必须是以 @media 开头 使用 mediatype 指定媒体(设备)类型 使用 and | not | only 逻辑操作符构建复杂

    2024年04月26日
    浏览(42)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(54)
  • 【vue3】js + css 实现 视频框选放大:局部细节放大、放大镜效果

    实现鼠标框选区域放大显示。 需求1:放大 按住鼠标左键不放 ——》向右侧拖动,框选出需要放大的区域后 ——》松开鼠标 ——》框选区域放大显示 需求2:还原 按住鼠标左键不放 ——》向左侧拖动,框选出随意大小的区域后 ——》松开鼠标 ——》视图显示大小还原 需求

    2024年02月03日
    浏览(56)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(65)
  • vue-codemirror实现一个前端代码在线编辑器,可处理 HTML,VUE,JS,CSS代码在线编辑

    先找个目录创建一个vue项目 例如 我们想要项目叫 editor 在终端执行 2和3其实都可以 但个人建议 最近还是2会更稳定一些 在终端执行 引入依赖包 然后在项目src目录下创建 utils 文件夹 里面创建一个setting.js 参考代码如下 然后 这边 调用组件的代码 因为项目也刚创 我直接写 s

    2024年02月15日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包