1、 Animate CSS is a cross browser dynamic effect basic library and a solution for many basic dynamic effects. It has everything from the classic bounce effect to the unique twist effect.
- Official websitehttps://animate.style
2、 Function introduction
Animation can improve the user experience of the interface through built-in animation. Through JS, users can freely control the animation,
3、 Installation
npm install animate.css –save
Vue item main JS
import "animate.css"
Note: animate must be added to the element__ The animated class
4、 Scenario practice
The following are the demos I made in my spare time. They are only provided for scenario guidance. Please expand more scenarios by yourself
1.dialog Popup
<div >
<button @click= "opendialog" > Open popup </button>
<div v-show="isOpen"
@click="closeDialog($event)"
>
<div>
<p>I am a pop-up window~~~</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. list deletion
<template>
<div >
<ul>
<li v-for="(item,index) of 8" :key="index">
<button @click= "delete ($event)" > delete </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. visual prompt
<template>
<div>
<ul>
<li>
<img src="../assets/clock.png">
</li>
<li>
<img src="../assets/heart.png">
</li>
<li>
<img src="../assets/location.png">
</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. slide the card left and right
<template>
<div>
<ul @touchstart="handleTouchstart($event)" @touchend="handleTouchend($event)">
<li></li>
<li style="background: orange"></li>
<li style="background: blue"></li>
<li style="background: pink"></li>
<li style="background: purple"></li>
<li style="background: blue"></li>
<li style="background: pink"></li>
<li style="background: purple"></li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
startTime: '',
startX: '',
startY: '',
}
},
methods: {
//Finger press
handleTouchstart(e){
this.startTime = Date.now();
this.startX = e.changedTouches[0].clientX;
this.startY = e.changedTouches[0].clientY;
},
//Finger away
handleTouchend(e) {
const endTime = Date.now();
const endX = e.changedTouches[0].clientX;
const endY = e.changedTouches[0].clientY;
//Judge the duration of pressing
if(endTime - this.startTime > 2000){
return;
}
//Sliding direction
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>