uniapp 缩放动画
时间: 2023-08-16 19:11:02 浏览: 70
在 Uniapp 中实现缩放动画可以使用 CSS3 的 transform 属性配合动画效果来实现。下面是一个示例代码:
```html
<template>
<view class="container">
<view class="box" :class="{ 'scale': isScaled }" @click="toggleScale"></view>
</view>
</template>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s ease;
}
.scale {
transform: scale(2);
}
</style>
<script>
export default {
data() {
return {
isScaled: false,
};
},
methods: {
toggleScale() {
this.isScaled = !this.isScaled;
},
},
};
</script>
```
在上面的代码中,我们使用了一个 `box` 容器作为动画目标,通过给 `box` 添加 `scale` 类来触发缩放效果。点击 `box` 触发 `toggleScale` 方法来切换 `isScaled` 数据的值,从而实现缩放与还原的动画效果。
希望这个示例对你有帮助!如果有任何问题,请随时向我提问。