vue animate.css4.x 实现动画效果

最新推荐文章于 2023-07-20 09:44:20 发布
最新推荐文章于 2023-07-20 09:44:20 发布
阅读量756 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gis_zzu/article/details/108600860
版权

animate.css 动画演示地址：https://animate.style/

1、安装animate.css

npm install animate.css --save

2、在main.js 中引入animate.css文件并挂载到vue上

// 引入动画animate.css
import animated from 'animate.css' 
Vue.use(animated)

3、使用动画信息

注意：安装4.x版本的animate.css 类名的使用发生了变化，需要添加前缀才可以生效，前缀是：animate__

（1）直接将类写在元素上

 <div class="animate__animated " :class="rightBtn.flag?'animate__fadeInRight':'animate__fadeOutLeft'">动画效果</div>

（2）使用vue的 transition 组件使用，推荐使用这种方式

  <transition  name="fade"
                enter-active-class="animate__animated animate__fadeInRight"
                leave-active-class="animate__animated animate__fadeOutRight"
                 >
                 <div class="animate__animated " :class="rightBtn.flag?'animate__fadeInRight':'animate__fadeOutLeft'">动画效果</div>
                 <!-- class="animate__animated " :class="rightBtn.flag?'animate__fadeInRight':'animate__fadeOutLeft'"  -->
        <right-info  v-if="rightBtn.flag"></right-info>
      </transition>

 

gis_SSS
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 1.0 结合animate.css定义动画效果
10-18
本文分步骤给大家介绍了Vue 1.0自定义动画效果，vue1.0代码结合animate.css定义动画，页面一定要引入animate.cdd，具体实例代码大家参考下本
vue脚手架中运用animate.css(4.* 版本)
业余前端的职业经历
07-08 1499
1.安装 npm install animate.css 2.注册 import animated from "animate.css"; Vue.use(animated); 3.使用 animate__animated 每个动画名 前面 都要有这个 <h1 class="animate__animated animate__bounce">An animated element</h1> 4.实际效果 5.更多的效果去官网 看看 直接在右侧动画名字 上有个拷贝的快捷键 点
Vue 过渡(动画)
weixin_47906106的博客
02-11 974
简介 vue在插入,更新或者移出DOM时,提供多种不同方式的应用过渡效果 本质上还是使用CSS3动画:transition,animation 基本用法 使用transition组件,将要执行动画的元素包含在该组件内 <transition> </transition> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ht
animate的使用
BHGVGHJK的博客
10-13 279
1、先将body框架搭建好 <body> <div class="boss"> <!-- 头部 --> <div class="head"> <div class="head_d1"></div> <p class="head_p1 animate__animated animate__fadeInLeft">欢迎来到某某电子电器有限公司！</p>
插件Animate的引用
m0_61841946的博客
10-10 284
animate官网： https://animate.style/ 可以尝试各种动画效果 animate__animated到元素类中，以及任何动画名称（不要忘记animate__前缀！） <div class="box"> <div class="top"> <!--animate__animated animate__ 这是前缀 双下划线后面接动画属性 fadeInLeftBig表示从左边大幅度进入--!>
封装一个animate函数，使元素以指定的方向和目标距离移动
weixin_45075549的博客
10-28 414
function animate(dom, cssObj, duration, callback) { //dom是要运动的元素，cssObj是要运动的属性对象如：{left：700，top：400}, duration元素运动到目标距离的总时长 // 定义间隔 var interval = 20; // 定义一个新的对象 该对象用于存放dom元素的现在的值 var...
fullpage.js结合animate.css实现滚屏动画
06-11
fullpage.js结合animate.css实现滚屏动画，每段代码都加有详细注释 文章地址：https://blog.csdn.net/cplvfx/article/details/80649574
前端vue_todoList案例实现animate.css库导入动画效果
04-12
在todoList项目中MyList组件中导入animate.css库，最终实现动画效果
vue过渡和animate.css结合使用详解
12-09
今天学习了vue过渡和animate.css结合使用，所以，添加一点小笔记。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> [removed]...
实例详解css3动画库animate.css的各种动画效果
森森
08-25 5609
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。它的老搭档wow.js，这俩好哥们，经常一起使用。 animate.css包括shake、flash、sw
Vue中使用animate.css V4
博客
05-29 4208
Vue中使用animate.css V4 最近把公司官网项目依赖进行了升级，里面用到了animate.css。目前版本4.1.0。 目前4.x版本相比之前3.x的breaking change如下： Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change
Animate.css(动画库)在vue中的简单使用
m0_58293192的博客
01-05 180
Animate.css(动画库)在vue中的简单使用
vue 使用animate动画
weixin_48850727的博客
02-07 496
vue 使用animate动画
Vue中使用animate.css V4做动画
weixin_46787337的博客
10-19 245
1. 引入： boot CND引入 链接 全局引入: $ yarn add animate.css $ import ‘animate.css’; $ Vue.use(animate) 更多动画名访问Animate官网 2. 使用方法 <template> <div id="example"> <button @click="show = !show">Toggle render</button> //引入方法之一 <t
解决过渡动画导致的抖动
m0_47195133的博客
09-02 783
解决过渡动画导致的抖动
初识Animate.css
weixin_55747430的博客
05-10 3461
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。一、安装使用安装二、基本用法1.使用方式三、keyframes关键帧 前言 Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。 官方学习文档网址 一、安装使用 安装 使用 npm 安装： $ npm install animate.css -.
vue项目项目使用animate.css动画效果
最新发布
夜空孤狼啸的博客
07-20 533
注意安装animate.css版本，我这里用的v4.1.1 ，animate__animated是基类必须使用的(因为安装的animate版本是4.x，使用时要注意对应的所有类名都以animate__开头，并且还要配合animate__animated一起使用！在main.ts文件中引入。
纯css动画库animate.css的用法
博哥的二进制世界
06-12 1159
纯css动画库animate.css的用法背景引入法一法二使用组件中使用如何自定义修改如持续时间之类的动画属性animate提供了哪些动画完整的使用示例 背景 手撕css动画是不是很脑壳痛呢，别慌，它来了，在这里推荐一款纯css的动画库，animate.css，只需要引入它，更改一下元素类名，即可快速实现你想要的动画效果 animate.css动画示例展示 animate.css官方github animate.css的3.x以下老版本的文档（老版本，不再推荐了） animate.css新版本官方文档 引入
animate.css 动画效果的使用
just
12-16 2365
下载安装animate.css 使用BootCDN加速 https://www.bootcdn.cn/ ，下载min版本即可。 重复执行 只需增加infinite即可 <div class="article-box animated fadeIn infinite"></div> 这样这个div就回循环执行 fadeIn动画 API Attention seekers...
vue animate.css 使用方法
06-28
### 回答1： Vue Animate.css 是一个 Vue.js 的插件，它可以让你轻松地在 Vue.js 应用程序中使用 Animate.css 动画库。使用 Vue Animate.css，你可以通过简单的指令来添加动画效果，而不需要编写任何 JavaScript 代码。下面是使用 Vue Animate.css 的步骤： 1. 安装 Vue Animate.css 插件： ``` npm install vue-animate-css ``` 2. 在 Vue.js 应用程序中引入 Vue Animate.css 插件： ``` import Vue from 'vue' import VueAnimateCss from 'vue-animate-css' Vue.use(VueAnimateCss) ``` 3. 在 Vue.js 组件中使用指令来添加动画效果： ``` <template> <div v-animate="'bounce'">Hello, world!</div> </template> ``` 在上面的例子中，我们使用 `v-animate` 指令来添加 `bounce` 动画效果。你可以在 Vue Animate.css 文档中找到更多可用的动画效果。 希望这个回答能够帮助你！ ### 回答2： Vue animate.css是一款非常方便实现各种动画的工具。它是基于开源库animate.css开发而来，使得在Vue项目中使用动画效果变得更为便捷。 首先，在Vue项目中还需要安装vue-animate-css这个插件以便使用这款工具。可以使用npm包管理工具来安装它，输入以下命令然后等待安装完成。 npm install vue-animate-css --save 使用这个工具的方式通常有三种： 1. 以组件的方式使用： 在需要使用动画效果的组件内，引入vue-animate-css库并且设置样式class即可。例如： ``` <template> <div> <h1 :class="animatedClass">例子</h1> </div> </template> <script> import {hover, fadeIn} from 'vue-animate-css'; export default { data: () => ({ animatedClass: hover + ' ' + fadeIn }) } </script> ``` 2. 作为全局 mixin： 使用全局mixin方法后，在整个Vue项目内都可以方便地使用动画效果。比如： ``` import Vue from 'vue'; import {bounce} from 'vue-animate-css'; Vue.mixin({ methods: { bounce: bounce } }); ``` 在使用时只需要在需要使用效果的元素上添加样式类名即可。 3. 通过指令使用： 通过指令使用在有些情况下更为直观。在使用前需要先在Vue项目中引入animate.css库。比如： ``` import 'animate.css/animate.min.css'; import Vue from 'vue'; Vue.use({ install(Vue) { Vue.directive('animate', { inserted: (el, binding) => { el.addEventListener('animationend', () => { el.classList.remove(binding.value, 'animated'); }); el.classList.add('animated', binding.value); } }); } }); ``` 在使用指令的组件中，可以在需要使用动画效果的元素上添加v-animate指令，比如： ``` <template> <div> <h1 v-animate="'bounce'">例子</h1> </div> </template> ``` 这样就可以实现元素在页面加载时弹跳一次的效果。 总的来说，vue animate.css是一个非常实用的库，可以便捷地实现各种动画效果。具体使用方法可以根据自己的项目需求来灵活运用。 ### 回答3： Vue animate.css是一款能够为Vue应用程序添加动画效果的插件。它通过使用animate.css框架中的动画类名称，实现了Vue动态展示元素的效果。使用Vue animate.css可以省去手写CSS或Javascript动画的烦琐操作，同时可以方便地实现页面元素的动态效果，提升用户体验。 Vue animate.css的使用方法如下： 1. 安装Vue animate.css插件，在命令行中运行以下命令： ``` npm install vue-animate-css --save ``` 2. 在Vue组件中引入vue-animate-css的插件： ``` import VueAnimateCss from 'vue-animate-css'; Vue.use(VueAnimateCss); ``` 3. 在组件的模板中添加需要动画效果的元素，并绑定动画类名称： ``` <template> <div> <h1 v-animate-css="'bounceIn'" class="animated">{{ message }}</h1> </div> </template> ``` 4. 在组件的样式表中引入animate.css框架，并为绑定动画类名称的元素添加相应的样式： ``` <style> @import "animate.css"; .animated { animation-duration: 1s; } </style> ``` 5. 在运行应用程序时，就可以看到具有动态效果的元素了。 在以上的使用方法中，v-animate-css即为绑定动画类名称的指令，'bounceIn'为animate.css框架中的一个动画类名称，可以根据需要自由更换。同时，样式表中的animation-duration属性可控制动画持续的时间。 总之，使用Vue animate.css可以在Vue应用程序中方便地实现动态效果，增强用户体验，并且简化了开发人员的操作。但需要注意的是，为了保证页面的性能，应适度使用动画效果，以避免过度设计的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值