使用uniapp做一个页面要求实现点击浮在页面上的一个按钮实现一个弹窗擦除进入的动画
在uniapp中实现点击浮在页面上的按钮弹出一个动画效果的弹窗,可以按照以下步骤进行操作:
- 创建一个新的uniapp项目。
- 在页面的
template中添加一个按钮和一个弹窗组件,并设置相应的样式和事件绑定。
<template>
<view>
<!-- 按钮 -->
<button class="btn" @click="showPopup">点击弹窗</button>
<!-- 弹窗 -->
<view class="popup" :class="{ 'show': isPopupVisible }">
<view class="content">
<!-- 弹窗内容 -->
<text>弹窗内容</text>
<button class="close-btn" @click="hidePopup">关闭</button>
</view>
</view>
</view>
</template>
- 在
data中添加一个isPopupVisible变量来控制弹窗的显示与隐藏。
<script>
export default {
data() {
return {
isPopupVisible: false
}
},
methods: {
// 显示弹窗
showPopup() {
this.isPopupVisible = true;
},
// 隐藏弹窗
hidePopup() {
this.isPopupVisible = false;
}
}
}
</script>
- 在
style中设置按钮和弹窗的样式,并定义弹窗的进入动画效果。
<style>
.btn {
width: 200px;
height: 50px;
background-color: #ff0000;
color: #ffffff;
border-radius: 10px;
margin: 20px auto;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.popup.show {
display: flex;
align-items: center;
justify-content: center;
}
.content {
width: 200px;
height: 200px;
background-color: #ffffff;
border-radius: 10px;
animation: popup-enter 0.3s;
}
@keyframes popup-enter {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.close-btn {
margin-top: 20px;
}
</style>
- 运行uniapp项目,点击按钮时,弹出的弹窗将会有一个擦除进入的动画效果。
通过以上步骤,你就可以在uniapp中实现点击浮在页面上的按钮,弹出一个带有擦除进入动画的弹窗了。
原文地址: https://www.cveoy.top/t/topic/i6K7 著作权归作者所有。请勿转载和采集!