問題描述

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

問題解答

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

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