uniapp 动画弹出效果
时间: 2023-07-24 08:40:49 浏览: 50
Uniapp 中可以使用 `animate.css` 库来实现各种动画效果,包括弹出效果。以下是一个简单的例子:
1. 在 `index.html` 中引入 `animate.css` 库:
```html
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
```
2. 在需要弹出的元素上添加 `animated` 和 `bounceIn` 类:
```html
<template>
<button @click="showModal">显示弹窗</button>
<div v-if="show" class="modal animated bounceIn">
<h2>这是一个弹窗</h2>
<p>欢迎使用 Uniapp</p>
<button @click="hideModal">关闭</button>
</div>
</template>
<style>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
}
</style>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
showModal() {
this.show = true;
},
hideModal() {
this.show = false;
}
}
}
</script>
```
这样就可以实现一个简单的弹出效果。你可以根据需要调整动画效果和样式。注意,`animate.css` 库只提供了动画效果,需要自己定义元素的样式。