web 页面/内容滑动
2021-01-27 20:15
标签：ima ons opacity can 全局 ide his gif pac 监听标签的触摸/鼠标滑动事件，添加元素的切换动画，效果如下： 鼠标事件和触摸事件监听： 触摸事件，不能HTMLElement.ontouchstart添加事件监听，可以EventListener或者在标签中添加 触摸事件有以下几个： 添加全局字段： 动画，可以通过state参数触发 动画数据参考： web 页面/内容滑动 标签：ima ons opacity can 全局 ide his gif pac 原文地址：https://www.cnblogs.com/kybs0/p/13218450.html
事件监听
1 componentDidMount() {
2 var teachingReportDiv = document.getElementById("teachingReport") as HTMLElement;
3 teachingReportDiv.onmousedown = this.onMouseDown;
4 teachingReportDiv.onmouseup = this.onMouseUp;
5 teachingReportDiv.addEventListener(‘touchstart‘, this.onTouchStart, false);
6 teachingReportDiv.addEventListener(‘touchmove‘, this.onTouchMove, false);
7 teachingReportDiv.addEventListener(‘touchend‘, this.onTouchEnd, false);
8 }
1 div id="teachingReport" onTouchStart={(event) => this.onTouchStart(event)}/>
touchstart事件：手指触摸时候触发（支持多指触发）touchmove事件：手指在滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动，当然也不能滥用否则会影响原有页面的上下滚动等。touchend事件：手指从屏幕上离开的时候触发touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明。。。不建议使用事件处理
1 onTouchStart = (event) => {
2 this.locationStartX = event.targetTouches[0].pageX;
3 }
4 onTouchMove = (event) => {
5 // event.preventDefault();
6 this.locationEndX = event.targetTouches[0].pageX;
7 }
8 onTouchEnd = (event) => {
9 const locationChangedX = this.locationEndX this.locationStartX;
10 if (Math.abs(locationChangedX) > 10) {
11 const isSlidingToRight=locationChangedX;
12 }
13 }
添加切换动画
1 div className="reportContent-img" style={{ animation: this.state.selectTabIndex == 0 ? ‘showFromLeft 0.4s forwards‘ : ‘hideToLeft 0.2s forwards‘ }}>div>
1 //动画
2 @keyframes showFromLeft {
3 from {
4 opacity: 0;
5 transform: translateX(-100px);
6 }
7 to {
8 opacity: 1;
9 transform: translateX(0px);
10 }
11 }
12 @keyframes showFromRight {
13 from {
14 opacity: 0;
15 transform: translateX(100px);
16 }
17 to {
18 opacity: 1;
19 transform: translateX(0px);
20 }
21 }
22 @keyframes hideToLeft {
23 from {
24 opacity: 1;
25 transform: translateX(0px);
26 }
27 to {
28 opacity: 0;
29 transform: translateX(-100px);
30 }
31 }
32 @keyframes hideToRight {
33 from {
34 opacity: 1;
35 transform: translateX(0px);
36 }
37 to {
38 opacity: 0;
39 transform: translateX(100px);
40 }
41 }
上一篇：css 基础选择器
下一篇：常见的HTTP状态码