問(wèn)題描述

在這個(gè)網(wǎng)頁(yè)的第2個(gè)例子【自適應(yīng) / 全屏 + 分頁(yè)】中http://www.swiper.com.cn/demo/index.html如果按住鼠標(biāo)向右拖動(dòng)，會(huì)發(fā)現(xiàn)可以拖動(dòng)，然后放開(kāi)鼠標(biāo)，就會(huì)'彈'回去，觀察代碼發(fā)現(xiàn)，是用了下面這個(gè)css3代碼transition-duration: 0ms; transform: translate3d(86.6443px, 0px, 0px);那么問(wèn)題來(lái)了，這個(gè)拖拉后彈回去的js效果要怎么寫(xiě)呢？哪位大神有思路？提供一下啦。謝謝!

問(wèn)題解答

給元素加上css3過(guò)渡動(dòng)畫(huà)，過(guò)渡動(dòng)畫(huà)的值為transform3d的x軸，手指拖動(dòng)的距離即為這個(gè)x軸的值，當(dāng)手指放開(kāi)，把x軸的值還原，也就是0px

看api 有滑動(dòng)效果的 或者自己寫(xiě)個(gè)動(dòng)畫(huà)，無(wú)非就是調(diào)節(jié)貝塞爾曲線出現(xiàn)緩存