h5转场动画
时间: 2023-06-30 20:26:52 浏览: 53
H5转场动画可以使用CSS3的动画效果来实现,以下是一个例子:
HTML代码:
```
<div class="page page1">
<h1>Page 1</h1>
<a href="#page2">Go to Page 2</a>
</div>
<div class="page page2" id="page2">
<h1>Page 2</h1>
<a href="#page1">Go to Page 1</a>
</div>
```
CSS代码:
```
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.page.active {
opacity: 1;
}
.page1 {
background-color: #f0f0f0;
}
.page2 {
background-color: #ccc;
transform: translateX(100%);
}
.page2.active {
transform: translateX(0%);
}
```
JS代码:
```
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
$('.page.active').removeClass('active');
$($.attr(this, 'href')).addClass('active');
});
```
在这个例子中,我们定义了两个页面(page1和page2),并使用CSS3的transform属性将page2向右移动。然后,我们使用jQuery来处理点击事件,并使用addClass和removeClass来切换页面的active类,从而实现页面转场动画。
相关推荐
![](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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)