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

Question

我正在尝试从本教程中获取离子的 3D 公告。

在向左拖动时，该通知工作正常，但它与我的手指滑动不同步。

我想让它通过滑动逐渐移动，并且，使动画继续并在某个值后完成到最终状态，否则它会返回到初始状态(如果我松开手指时没有达到这个值(。

这是我的风格.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)');
    };
  });
})

这是 html ：

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

Answer 1

我通过在调用函数 swipeOn() 时将 $event 对象作为参数传递来解决问题。

$event对象包含浏览器的事件对象，包括包含滑动变化$event.gesture.deltaX的手势属性，更改为：

在我的控制器中：

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)');
};

在 HTML 中：

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