微信小程序点击按钮,使元素向左上角滑动
时间: 2023-08-08 15:06:32 浏览: 54
你可以使用 CSS3 的 `transition` 和 `transform` 属性来实现元素的滑动动画。具体实现步骤如下:
1. 在 WXML 文件中创建一个按钮和需要滑动的元素,如下所示:
```
<view class="container">
<button bindtap="slideElement">点我滑动</button>
<view class="element"></view>
</view>
```
2. 在 WXSS 文件中设置按钮和元素的样式,如下所示:
```
.container {
position: relative;
width: 100%;
height: 100%;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #f00;
transition: all 0.5s ease-in-out;
}
```
3. 在 JS 文件中编写滑动动画的代码,如下所示:
```
Page({
slideElement: function() {
var element = document.querySelector('.element');
element.style.transform = 'translate(-100%, -100%)';
}
})
```
以上代码实现了点击按钮后,元素向左上角滑动的效果。你可以根据自己的需求修改元素的起始位置、滑动方向、滑动距离和滑动时间等参数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)