animate地址: https://animate.style/
1. npm install animate.css --save 安装 animate.css
2. 在vue的main.js 中全局引用 import 'animate.css'
3. 在组建里使用
<transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__shakeX" leave-active-class="animate__fadeOutUpBig"> <h1 :key="1" v-if="isShow" id="hahah">hahahahhahahah</h1> </transition-group>
name="animate__animated animate__bounce" 固定使用,必须有
enter-active-class 进入时的动画
leave-active-class 离开时的动画
:key="1" key 必须存在并唯一
代码:
<template>
<div class="about">
<h2>{{ myObj.age }}</h2>
<button id="btn" @click="click1">{{ msg }}</button>
<transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__shakeX" leave-active-class="animate__fadeOutUpBig">
<h1 :key="1" v-if="isShow" id="hahah">hahahahhahahah</h1>
<h2 :key="2" v-if="isShow" id="hahah2">heiheiheiheihei</h2>
</transition-group>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "AboutView",
setup() {
let c = {
msg: ref("haha??"),
isShow: ref(true),
myObj: ref({
name: "zhangsan",
age: 18,
}),
click1: () => {
c.myObj.value.age = 30;
if (c.isShow.value) {
c.isShow.value = false;
return;
}
c.isShow.value = true;
c.myObj.value.age = 18;
},
};
console.log(c.msg);
console.log(c.myObj.value.age);
return c;
},
};
</script>
<style lang="less" scoped>
.about {
width: calc(100vw);
height: calc(100vh);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
#hahah {
color: black;
background-color: orange;
width: 500px;
height: 50px;
}
#hahah2 {
color: green;
background-color: orange;
width: 500px;
height: 50px;
margin: 2px;
}
#btn {
width: 100px;
height: 30px;
margin-bottom: 50px;
background-color: #007acc;
}
}
</style>
