Как сделать анимацию css синхронизированной с палец пальцем в ионной?

Question

Я пытаюсь сделать 3D-анонсирование в ионной форме, вдохновленной этим tutorial.

Аннуитет прекрасно работает при перетаскивании Влево, но он не синхронизирован с пальцем.

Я хочу, чтобы он двигался постепенно с помощью салфетки, и чтобы анимация продолжалась и заканчивалась в конечном состоянии после определенного значения, в противном случае оно возвращается в исходное состояние (если я не достиг этого значения, когда я отпустите мой палец).

Вот мой 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)'); 
    }; 
    }); 
}) 

А вот HTML:

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

Answer 1

Я решил проблему путем пропускания $event объект в качестве аргумента при вызове функции swipeOn().

Объект $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">