Jquery 如何使css动画与ionic中的手指滑动同步？

我正试图以此为灵感在爱奥尼亚制作一个3D周年纪念

“周年纪念”在向左拖动时运行良好，但它与我的手指滑动不同步

我想让它随着滑动而逐渐移动，并使动画在某个值之后继续并完成到其最终状态，否则它将返回到初始状态（如果我松开手指时未达到该值）

这里是我的style.css文件：

.view2 {
width: 100%;
height: 350px;
margins: 10px;
float: left;
position: relative;
border: 8px solid #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
background: #333;
-webkit-perspective: 1050px;
perspective: 1050px;
}
.view2 .slice{
width: 20.1%;
height: 100%;
z-index: 100;
background-color: red;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;
}
.view2 .slice div{
width: 100%;
}
.view2 div.view2-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background: #666;
z-index: 0;
}
.view2 .s1 {
background-position: 0px 0px;
}
.view2 .overlay {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view2 img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view2 div {
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.view2 .s2 > .overlay {
background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view2 .s3 > .overlay {
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view2 .s4 > .overlay {
background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}
.view2 .s5 > .overlay {
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}
.view2 div.view2-back{
background: #0a0a0a;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666));
background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%);
background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}

这是我的控制器：

angular.module('starter.controllers', [])    
.controller('HoverEffectCtrl', function($scope,$ionicModal) {
  angular.element(document).ready(function() {
    var $item   = $('.view2'),
    img     = $item.children( 'img' ).attr( 'src' ),
    width = $item.width()/5,
    struct  = '<div class="slice s1">';
    struct  +='<div class="slice s2">';
    struct  +='<div class="slice s3">';
    struct  +='<div class="slice s4">';
    struct  +='<div class="slice s5">';
    struct  +='</div>';
    struct  +='</div>';
    struct  +='</div>';
    struct  +='</div>';
    struct  +='</div>';
    var $struct = $( struct );
    $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
    $item.find( '.s2' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s2' ).css( 'background-position', '-'+width+'px 0px');
    $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s3' ).css( 'background-position', '-'+2*width+'px 0px');
    $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s4' ).css( 'background-position', '-'+3*width+'px 0px');
    $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s5' ).css( 'background-position', '-'+4*width+'px 0px');
    $scope.swipeOff = function () {
      $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px)');
      $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px)');
      $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px)');
      $item.find( '.overlay' ).css( 'opacity', 0);
    };
    $scope.swipeOn = function () {
      $item.find( '.overlay' ).css( 'opacity', 1);
      $item.find( '.s3' ).css( 'transform', 'translate3d('+width+'px,0,0) rotate3d(0,1,0,-55deg)');
      $item.find( '.s4' ).css( 'transform', 'translate3d('+width+'px,0,0) rotate3d(0,1,0,110deg)');
      $item.find( '.s5' ).css( 'transform', 'translate3d('+width+'px,0,0) rotate3d(0,1,0,-110deg)');
    };
  });
})

const pi = Math.acos(-1);
const r = width;

$scope.swipeOff = function (event) {
  var dx = -$event.gesture.deltaX;
  if (dx >= 2.5*width) {
    finishAnimation();
  }
  else {
    $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.overlay' ).css( 'opacity', 0);
  }

};

$scope.swipeOn = function (event) {
  var dx = -$event.gesture.deltaX/3;
  var cosTeta = ((r - dx)) / r;
  var dTetaRad = Math.acos (cosTeta);
  var dTetaDeg = mTeta * (180/pi);
  if (dTetaDeg < 80) {
   $item.find( '.overlay' ).css( 'opacity', dTetaRad);
  $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,'+-dTetaDeg+'deg)');
  $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,'+2*dTetaDeg+'deg)');
  $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,'+-2*dTetaDeg+'deg)');
}
};

finishAnimation = function(){
  $item.find( '.overlay' ).css( 'opacity', 1);
  $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,-80deg)');
  $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,160deg)');
  $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,-160deg)');
};

角度模块（'starter.controllers'，[]） .controller（'HoverEffectCtrl'，函数（$scope，$ionicModal）{ 元素（文档）.ready（函数（）{ 变量$item=$（'.view2'）， img=$item.children（'img'）.attr（'src'）， 宽度=$item.width（）/5， 结构=''； struct+=''； struct+=''； struct+=''； struct+=''； struct+=''； struct+=''； struct+=''； struct+=''； struct+=''； var$struct=$（struct）； $item.find（'img'）.remove（）.end（）.append（$struct）.find（'div.slice'）.css（'background image'，'url（'+img+'）））.prepend（$（''）； $item.find（'.s2'）.css（'transform'，'translateX（'+width+'px'））； $item.find（'.s2'）.css（'background position'，'-'+width+'px 0px'）； $item.find（'.s3'）.css（'transform'，'translateX（'+width+'px'））； $item.find（'.s3'）.css（'background position'，'-'+2*width+'px 0px'）； $item.find（'.s4'）.css（'transform'，'translateX（'+width+'px'））； $item.find（'.s4'）.css（'background position'，'-'+3*width+'px 0px'）； $item.find（'.s5'）.css（'transform'，'translateX（'+width+'px'））； $item.find（'.s5'）.css（'background position'，'-'+4*width+'px 0px'）； $scope.swipeOff=函数（）{ $item.find（'.s3'）.css（'transform'，'translateX（'+width+'px'））； $item.find（'.s4'）.css（'transform'，'translateX（'+width+'px'））； $item.find（'.s5'）.css（'transform'，'translateX（'+width+'px'））； $item.find（'.overlay'）.css（'opacity'，0）； }; $scope.swipoun=函数（）{ $item.find（'.overlay'）.css（'opacity'，1）； $item.find（'.s3'）.css（'transform'，'translate3d（'+width+'px，0,0）rotate3d（0,1,0，-55度）'）； $item.find（'.s4'）.css（'transform'，'translate3d（'+width+'px，0,0）rotate3d（0,1,0110deg）'）； $item.find（'.s5'）.css（'transform'，'translate3d（'+width+'px，0,0）rotate3d（0,1,0，-110度）'）； }; }); }) 以下是html：

<div on-drag-left="swipeOn()" on-release="swipeOff()" class="view2">
  <div class="view2-back"></div>
  <img src="img/image.jpg" />
</div>

---

调用函数

swipoun（）

时，我通过将

$event

对象作为参数传递，解决了这个问题

$event

对象包含浏览器的事件对象，包括包含滑动变化的手势属性

$event.signate.deltaX

，更改如下：

在我的控制器中：

angular.module('starter.controllers', [])    
.controller('HoverEffectCtrl', function($scope,$ionicModal) {
  angular.element(document).ready(function() {
    var $item   = $('.view2'),
    img     = $item.children( 'img' ).attr( 'src' ),
    width = $item.width()/5,
    struct  = '<div class="slice s1">';
    struct  +='<div class="slice s2">';
    struct  +='<div class="slice s3">';
    struct  +='<div class="slice s4">';
    struct  +='<div class="slice s5">';
    struct  +='</div>';
    struct  +='</div>';
    struct  +='</div>';
    struct  +='</div>';
    struct  +='</div>';
    var $struct = $( struct );
    $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
    $item.find( '.s2' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s2' ).css( 'background-position', '-'+width+'px 0px');
    $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s3' ).css( 'background-position', '-'+2*width+'px 0px');
    $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s4' ).css( 'background-position', '-'+3*width+'px 0px');
    $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s5' ).css( 'background-position', '-'+4*width+'px 0px');
    $scope.swipeOff = function () {
      $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px)');
      $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px)');
      $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px)');
      $item.find( '.overlay' ).css( 'opacity', 0);
    };
    $scope.swipeOn = function () {
      $item.find( '.overlay' ).css( 'opacity', 1);
      $item.find( '.s3' ).css( 'transform', 'translate3d('+width+'px,0,0) rotate3d(0,1,0,-55deg)');
      $item.find( '.s4' ).css( 'transform', 'translate3d('+width+'px,0,0) rotate3d(0,1,0,110deg)');
      $item.find( '.s5' ).css( 'transform', 'translate3d('+width+'px,0,0) rotate3d(0,1,0,-110deg)');
    };
  });
})

const pi = Math.acos(-1);
const r = width;

$scope.swipeOff = function (event) {
  var dx = -$event.gesture.deltaX;
  if (dx >= 2.5*width) {
    finishAnimation();
  }
  else {
    $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px)');
    $item.find( '.overlay' ).css( 'opacity', 0);
  }

};

$scope.swipeOn = function (event) {
  var dx = -$event.gesture.deltaX/3;
  var cosTeta = ((r - dx)) / r;
  var dTetaRad = Math.acos (cosTeta);
  var dTetaDeg = mTeta * (180/pi);
  if (dTetaDeg < 80) {
   $item.find( '.overlay' ).css( 'opacity', dTetaRad);
  $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,'+-dTetaDeg+'deg)');
  $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,'+2*dTetaDeg+'deg)');
  $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,'+-2*dTetaDeg+'deg)');
}
};

finishAnimation = function(){
  $item.find( '.overlay' ).css( 'opacity', 1);
  $item.find( '.s3' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,-80deg)');
  $item.find( '.s4' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,160deg)');
  $item.find( '.s5' ).css( 'transform', 'translateX('+width+'px) rotate3d(0,1,0,-160deg)');
};

const pi=Math.acos（-1）；
常数r=宽度；
$scope.swipeOff=函数（事件）{
var dx=-$event.signature.deltaX；
如果（dx>=2.5*宽度）{
finishAnimation（）；
}
否则{
$item.find（'.s3'）.css（'transform'，'translateX（'+width+'px'））；
$item.find（'.s4'）.css（'transform'，'translateX（'+width+'px'））；
$item.find（'.s5'）.css（'transform'，'translateX（'+width+'px'））；
$item.find（'.overlay'）.css（'opacity'，0）；
}
};
$scope.swipoun=函数（事件）{
var dx=-$event.signature.deltaX/3；
var cosTeta=（（r-dx））/r；
var dtetaad=Math.acos（cosTeta）；
var dTetaDeg=mTeta*（180/pi）；
如果（dTetaDeg<80）{
$item.find（'.overlay'）.css（'opacity'，dtetrad）；
$item.find（'.s3'）.css（'transform'，'translateX（'+width++'px）rotate3d（0,1,0'，+-dTetaDeg++'deg'）；
$item.find（'.s4'）.css（'transform'，'translateX（'+width+'px）rotate3d（0,1,0'，+2*dTetaDeg+'deg））；
$item.find（'.s5'）.css（'transform'，'translateX（'+width++'px）rotate3d（0,1,0'，+-2*dTetaDeg++'deg'）；
}
};
finishAnimation=函数（）{
$item.find（'.overlay'）.css（'opacity'，1）；
$item.find（'.s3'）.css（'transform'，'translateX（'+width+'px）rotate3d（0,1,0，-80度）'）；
$item.find（'.s4'）.css（'transform'，'translateX（'+width+'px）rotate3d（0,1,0160度）'）；
$item.find（'.s5'）.css（'transform'，'translateX（'+width+'px）旋转3d（0,1,0，-160度））；
};

在HTML中：

<div on-drag-left="swipeOn($event)" on-release="swipeOff($event)" class="view2">

如果您解决了问题，请将其作为答案发布，并将其标记为正确。不要把你的答案放在这个问题上。好的，完成。：）