uniapp 动画弹出效果
时间: 2023-07-24 19:37:03 浏览: 38
Uniapp 中可以使用 CSS3 动画和 JS 动画来实现弹出效果。以下是一个简单的例子:
1. CSS3动画:
在组件的样式中添加如下代码:
```css
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: popup 0.3s ease forwards;
}
@keyframes popup {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
```
在组件的方法中添加以下代码:
```javascript
mounted() {
this.$nextTick(() => {
this.showPopup = true;
});
}
```
2. JS动画:
在组件的方法中添加以下代码:
```javascript
mounted() {
this.$nextTick(() => {
this.showPopup = true;
let popup = this.$refs.popup;
const start = +new Date();
const duration = 300; // 动画时长,单位毫秒
const end = start + duration;
const animate = () => {
const now = +new Date();
const progress = (now - start) / duration;
if (progress > 1) {
popup.style.transform = 'scale(1)';
} else {
popup.style.transform = `scale(${progress})`;
requestAnimationFrame(animate);
}
};
animate();
});
}
```
以上两种方法都可以实现弹出效果,具体选用哪一种可以根据实际情况进行选择。