动效解决方案 Animate.css
2021-08-30 本文已影响0人
丸子小姐__不懂爱
一、 Animate.css 是一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。
二、功能介绍
animate通过内置动画可以改善界面的用户体验，通过js，用户可自由控制动画的进行，
三、安装
npm install animate.css --save
vue 项目main.js 中导入
import "animate.css"
注意： 元素上必须添加 animate__animated这个类
四、 场景实践
以下皆为本人业余时间做的demo，仅供应用场景引导， 更多使用场景请自行展开
1.Dialog 弹窗
<div class="home animate__animated " >
<button @click="openDialog">打开弹窗</button>
<div v-show="isOpen" class="mask animate__animated animate__fast"
@click="closeDialog($event)"
>
<div class="dialog animate__animated animate__faster">
<p>我是一个弹窗哈~~~</p>
</div>
</div>
</div>
<script>
export default {
name: 'Home',
data() {
return {
isOpen: false
}
},
methods: {
openDialog() {
this.isOpen = true;
let oMask = document.getElementsByClassName('mask')[0];
let oDialog = document.getElementsByClassName('dialog')[0];
oMask.classList.remove('animate__fadeOut');
oDialog.classList.remove('animate__zoomOut')
oMask.classList.add('animate__fadeIn')
oDialog.classList.add('animate__zoomIn')
},
closeDialog(e) {
if(e.target.className.indexOf('mask') != -1){
let oMask = document.getElementsByClassName('mask')[0];
let oDialog = document.getElementsByClassName('dialog')[0];
oMask.classList.remove('animate__fadeIn');
oMask.classList.add('animate__fadeOut')
oDialog.classList.remove('animate__zoomIn')
oDialog.classList.add('animate__zoomOut')
setTimeout(() => {
this.isOpen = false;
}, 330);
}
}
},
}
</script>
<style lang="less" scoped>
.home {
position: relative;
height: 100%;
background: rgb(251, 252, 251);
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(92, 92, 92,.5);
display: flex;
justify-content: center;
align-items: center;
.dialog {
width: 70%;
height: 50vh;
background: #fff;
border-radius: 8px;
}
}
</style>
2.列表删除
<template>
<div class="about" >
<ul>
<li class="animate__animated " v-for="(item,index) of 8" :key="index">
<button @click="delate($event)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
delate(e){
e.target.parentElement.classList.add('animate__fadeOutTopRight')
e.target.parentElement.classList.add('hidden')
}
}
}
</script>
<style lang="less" scoped>
.about {
height: 100%;
background: rgb(22, 174, 235);
padding: 15px;
ul{
margin: 0;
padding: 0;
border-radius: 6px;
overflow: hidden;
li {
padding: 0 20px;
margin-bottom: 6px;
list-style: none;
height: 80px;
background: #fff;
line-height: 80px;
text-align: right;
border-radius: 6px;
transition: height 330ms 220ms ease-in;
&.hidden {
height: 0;
}
button {
align-self: flex-end;
width: 90px;
height: 36px;
border: none;
background: orange;
color: #fff;
border-radius: 6px;
box-shadow: 1px 1px 8px #ccc;
outline: none;
cursor: pointer;
}
}
}
}
</style>
3.视觉提示
<template>
<div class="demo02">
<ul>
<li class="animate__animated animate__wobble animate__infinite">
<img src="../assets/clock.png" alt="">
</li>
<li class="animate__animated animate__heartBeat animate__infinite">
<img src="../assets/heart.png" alt="">
</li>
<li class="animate__animated animate__bounce animate__infinite">
<img src="../assets/location.png" alt="">
</li>
</ul>
</div>
</template>
<style lang="less" scoped>
.demo02 {
ul {
margin: 0;
padding: 0;
li {
padding: 50px 0;
list-style: none;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 30%;
}
}
}
}
</style>
4.左右滑卡片
<template>
<div class="demo03">
<ul @touchstart="handleTouchstart($event)" @touchend="handleTouchend($event)">
<li class="animate__animated"></li>
<li class="animate__animated" style="background: orange"></li>
<li class="animate__animated" style="background: blue"></li>
<li class="animate__animated" style="background: pink"></li>
<li class="animate__animated" style="background: purple"></li>
<li class="animate__animated" style="background: blue"></li>
<li class="animate__animated" style="background: pink"></li>
<li class="animate__animated" style="background: purple"></li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
startTime: '',
startX: '',
startY: '',
}
},
methods: {
// 手指按下
handleTouchstart(e){
this.startTime = Date.now();
this.startX = e.changedTouches[0].clientX;
this.startY = e.changedTouches[0].clientY;
},
// 手指离开
handleTouchend(e) {
const endTime = Date.now();
const endX = e.changedTouches[0].clientX;
const endY = e.changedTouches[0].clientY;
// 判断按下的时长
if(endTime - this.startTime > 2000){
return;
}
// 滑动方向
let direction = '';
if(Math.abs(endX - this.startX ) > 10) {
if(Math.abs(endY - this.startY) > 30 ){
return;
}else {
direction = endX - this.startX > 0?"right":'left'
}
}else {
return;
}
if(direction == 'left'){
console.log(e.target);
e.target.classList.add('animate__fadeOutLeftBig')
}else {
e.target.classList.add('animate__fadeOutRightBig')
}
}
},
}
</script>
<style lang="less" scoped>
.demo03 {
overflow: hidden;
ul {
margin: 140px auto;
position: relative;
width: 50%;
height: 340px;
li {
list-style: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: skyblue;
}
}
}
</style>
