Как реализовать простой переход пальцем в AngularJS Animation - PullRequest
Новая
       17

Как реализовать простой переход пальцем в AngularJS Animation

0 голосов
/ 25 июня 2019

Моя анимация работает и смахивает, но работает только с проведением влево.Я не могу понять, как правильно разместить анимацию в моем коде.

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

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

<div ng-app= "welcomeModule" ng-controller="welcomeController">

    <main>
        <div class="container-fluid">
            <div class="row h-100">
                    <!-- Place this container on the left 1/3rd column of the screen -->
                <div class="signoutContainer col-md-6" ng-swipe-right="redirectSignOut()">
                    <button class="btn" id="signOut" ng-click="redirectSignOut()"> 
                        <i class="fas fa-sign-out-alt"></i> Sign Out 
                    </button>
                </div>
                    <!-- Place this container on the middle 1/3rd of the screen -->
                <div class="welcomeContainer">
                    <img id="mrcImg" src="https://i.imgur.com/GypZ28u.jpg">
                </div>
                    <!-- Place this container on the right 1/3rd column of the screen -->
                <div class="signinContainer col-md-6" ng-swipe-left="redirectSignIn()">
                    <button class="btn" id="signIn" ng-click="redirectSignIn()"> 
                        <i class="fas fa-sign-in-alt"></i> Sign In
                    </button>
                </div>
            </div>
        </div>
    </main>
</div>


main.ng-leave {
  transition: .25s ease all;
  opacity: 1;
  transform: translateX(0);
}

main.ng-leave.ng-leave-active {
  opacity: 0;
  transform: translateX(-275px);
}
...