h5转场动画
时间: 2023-06-29 14:04:45 浏览: 31
H5转场动画可以通过CSS3的transition和transform属性实现。以下是一个简单的示例代码:
HTML:
```html
<div class="page page1"></div>
<div class="page page2"></div>
```
CSS:
```css
.page {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.page1 {
background-color: #f00;
transform: translateX(0);
}
.page2 {
background-color: #0f0;
transform: translateX(100%);
}
```
JavaScript:
```javascript
document.querySelector('.page1').addEventListener('click', function() {
document.querySelector('.page2').style.transform = 'translateX(0)';
});
document.querySelector('.page2').addEventListener('click', function() {
document.querySelector('.page2').style.transform = 'translateX(100%)';
});
```
以上代码将两个页面放在同一位置,通过transform属性控制页面的位置,通过transition属性设置页面位置变化的过渡动画效果。通过JavaScript监听页面的点击事件,触发页面之间的切换效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)