在vue中便捷使用animate动画库效果。
安装animate动画库
npm install animate.css --save
在vue跟目录中 main.js 导入animate动画库
import animated from 'animate.css'
Vue.use(animated)
使用一
直接在css中引入动画
缺点: 在页面一加载完毕动画同时也执行完毕,要是在页面可视区域外,动画就不能被用户看到
<div class="animate__animated animate__backInLeft" > 第一个 animate__animated 为固定的类名 必须要加 第二个 animate__backInLeft 在动画库中 选择的效果 </div>
可在官网选择所需的动画样式名字,官网地址:https://animate.style/
使用二
优点:该方法是页面滑动到标签位置,标签显示,立马执行该动画。
在vue跟目录中 main.js 中自定义指令
注:该事件是在大佬的博客发现,要是各位发现原址,欢迎评论留言
// 页面滑动到元素执行改动画 Vue.directive('class', { inserted: function (el, binding) { // 聚焦元素 binding.addClass = () => { const { top } = el.getBoundingClientRect() const h = document.documentElement.clientHeight || document.body.clientHeight // console.log('屏幕', top, '可', h) if (top < h) { el.className = binding.value if (binding.addClass) { window.removeEventListener('scroll', binding.addClass) } } } window.addEventListener('scroll', binding.addClass) binding.addClass() }, unbind: function (el, binding) { if (binding.addClass) { window.removeEventListener('scroll', binding.addClass) console.log('取消事件绑定') } } })
缺点: 在使用该事件需要嵌套一层div,用来放该动画事件
<div v-class="'animate__animated animate__fadeInUp'"> <div> 动画内容 建议在外面包一层div 防止影响到页面css </div> </div>
保存该css: https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
保存至static文件下
<style> /*每个页面公共css */ @import "static/css/animate.css"; </style>