手把手教你實(shí)現(xiàn)web頁面內(nèi)容滑動效果

componentDidMount() {     var teachingReportDiv = document.getElementById("teachingReport") as HTMLElement;   teachingReportDiv.onmousedown = this.onMouseDown;      teachingReportDiv.onmouseup = this.onMouseUp;        teachingReportDiv.addEventListener('touchstart', this.onTouchStart, false);        teachingReportDiv.addEventListener('touchmove', this.onTouchMove, false);        teachingReportDiv.addEventListener('touchend', this.onTouchEnd, false);    }

 
"teachingReport" onTouchStart={(event) => this.onTouchStart(event)}/>

 locationStartX: number = 0;    locationEndX: number = 0;

 onTouchStart = (event) => {         this.locationStartX = event.targetTouches[0].pageX;    }    onTouchMove = (event) => {        // event.preventDefault();       this.locationEndX = event.targetTouches[0].pageX;     }     onTouchEnd = (event) => {         const locationChangedX = this.locationEndX < this.locationStartX;        if (Math.abs(locationChangedX) > 10) {            const isSlidingToRight=locationChangedX<0;       }???}

 this.onTouchStart(event)}/>動畫數(shù)據(jù)參考：//動畫

   @keyframes showFromLeft {    from {      opacity: 0;      transform: translateX(-100px);     }      to {        opacity: 1;        transform: translateX(0px);    }   }   @keyframes showFromRight {     from {      opacity: 0;       transform: translateX(100px);     }     to {      opacity: 1;       transform: translateX(0px);     }   }  @keyframes hideToLeft {     from {       opacity: 1;      transform: translateX(0px);     }     to {      opacity: 0;      transform: translateX(-100px);    }   }   @keyframes hideToRight {    from {       opacity: 1;      transform: translateX(0px);     }     to {      opacity: 0;       transform: translateX(100px);    }   }