I have a straightforward div setup that smoothly transitions upward when swiped up on the screen, functioning perfectly on my desktop. However, I am encountering difficulties getting the transition to work on my mobile device (also tested on an Android emulator).
Initially, I suspected an issue with the swipe functionality (utilizing TouchSwipe), but even after testing it with a button, the transitions continue to remain inactive. Just to provide some context, this is within an Angular application and forms part of an Angular template. I don't believe there are any conflicts between these elements...
Any suggestions or insights?
HTML:
<div id="fullpage" class="swipe-container">
<div class="section">
<button id="btnOpen" class="btn btn-primary">Open</button>
<div class="swipeMenu">
Text
</div>
</div>
</div>
CSS:
.swipeMenu {
height: 45vh;
width: 90vw;
background-color: #fff;
position: absolute;
bottom: -45vh;
left: 0;
right: 0;
margin: 0 auto;
}
JS:
$(function() {
$("#btnOpen").click(function() {
$('.swipeMenu').css("-webkit-transition", "-webkit-transform 0.3s ease");
$('.swipeMenu').css("-moz-transition", "-moz-transform 0.3s ease");
$('.swipeMenu').css("-o-transition", "-o-transform 0.3s ease");
$('.swipeMenu').css("transition", "transform 0.3s ease");
$('.swipeMenu').css("transform", "translateY(-40vh)");
});
//Enable swiping...
$(".swipe-container").swipe( {
//Generic swipe handler for all directions
swipeUp:function(event, direction, distance, duration, fingerCount) {
$('.swipeMenu').css("-webkit-transition", "-webkit-transform 0.3s ease");
$('.swipeMenu').css("-moz-transition", "-moz-transform 0.3s ease");
$('.swipeMenu').css("-o-transition", "-o-transform 0.3s ease");
$('.swipeMenu').css("transition", "transform 0.3s ease");
$('.swipeMenu').css("transform", "translateY(-40vh)");
},
swipeDown:function(event, direction, distance, duration, fingerCount) {
$('.swipeMenu').css("-webkit-transition", "-webkit-transform 0.3s ease-in");
$('.swipeMenu').css("-moz-transition", "-moz-transform 0.3s ease-in");
$('.swipeMenu').css("-o-transition", "-o-transform 0.3s ease-in");
$('.swipeMenu').css("transition", "transform 0.3s ease-in");
$('.swipeMenu').css("transform", "translateY(40vh)");
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold: 80
});
});