показать и скрыть div Android style

Question

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

Пожалуйста, проверьте мой пример. когда я нажимаю NEXT это показывает другой div, тогда, когда я нажимаю Создайте учетную запись это показывает другой div, а затем, когда я нажимаю НАЗАД, это страница регистрации. это анимация, но снова, когда я нажимаю Создайте аккаунт, затем div move (страница входа), а другой div (страница регистрации) не отображается.

Demo https://jsfiddle.net/cyber007/u78adoto/1/

Html

<div class="overlaycontent"> 
<!-- Choose country area --> 
<div class="country-selector"> 
<h4>Choose Country</h4> 
<form> 
<input id="bangaldesh" type="radio" name="country" value="bangaldesh" /> 
<label class="country-label bd" for="bangaldesh"></label> 
<input id="malaysia" type="radio" name="country" value="malaysia" /> 
<label class="country-label my" for="malaysia"></label></form> 
<div class="next-btn"><a href="#">Next</a></div> 
</div> 



    <div class="userinput hidepanel"> 
<div class="section country-selectd"> <img src="images/flag-bangladesh.png" alt=""/></div> 

<!-- sign in area--> 
<div class="section signin-panel"> 
<form action="call-log.html"> 
     <div class="inputarea user"> 
     <input type="text" placeholder="Phone Number"> 
     </div> 
     <div class="inputarea password"> 
     <input type="password" placeholder="Password"> 
     </div> 
     <input type="submit" class="sbtn btn-login" formaction="call-log.html" value="login"> 
     <input type="submit" class="sbtn btn-create" formaction="call-log.html" value="Create an Account" id="creatbtn"> 
     <input type="submit" class="sbtn btn-more" formaction="call-log.html" value="More"> 
    </form> 
</div> 

    <!-- sign up area--> 
<div class="section signup-panel hidepanel"> 
<div class="inputarea phone"><input type="tel" placeholder="Your Telephone Number"></div> 
<div class="inputarea user"><input type="text" placeholder="User Name"></div> 
<div class="inputarea password"><input type="password" placeholder="Password"></div> 
<div class="inputarea password"><input type="password" placeholder="Password"></div> 
<input type="submit" class="sbtn btn-login" formaction="call-log.html" value="Sign Up"> 
     <input type="submit" class="sbtn" value="Back" id="backbtn"> 
    </div> 


</div> 

</div> 

Js

$(".next-btn a").click(function(){ 
      $('.country-selector').addClass('animated slideOutLeft'); 
      $('.userinput').addClass('animated slideInRight').show(); 
       return false; 
      }); 

    $(".btn-create").click(function(){ 
      $('.signin-panel').addClass('animated slideOutLeft'); 
      $('.signup-panel').addClass('animated slideInRight').removeClass('hidepanel slideOutLeft').show(); 
       return false; 
      }); 



    $("#backbtn").click(function(){ 
      $('.signup-panel').addClass('animated slideOutRight').removeClass('slideOutLeft'); 
      $('.signin-panel').addClass('animated slideInLeft').removeClass('hidepanel slideOutLeft'); 
       return false; 
      }); 

я не уверен, что мой JavaScript или slideing способ хорош или плох, но если вы, ребята, знаете, любой другое решение для слайда одного div на другое a nd чувствуйте, что анимация на странице Android, пожалуйста, совет.

может быть без animate.css также возможного перехода только позиции с помощью CSS анимации

Answer 1

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

> https://jsfiddle.net/cyber007/u78adoto/3/ 

Answer 2

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

Однако, если вы сделаете это, оно вернется к старым стилям без классов animated slideXX Поэтому я предлагаю удалить неиспользованный HTML после завершения анимации. Это то, что с помощью рамки даст вам.

В любом случае вы уже определили это.

Так что вы после этого, несмотря на то, бедный селектор и даже плохое решение может помочь вам:

function removeClasses(){ 
    var selectors = '.slideOutLeft, .animated, .slideInRight'; 
    $().removeClass(selectors); 
} 

$(".next-btn a").click(function(){ 
    removeClasses(); 
    $('.country-selector').addClass('animated slideOutLeft'); 
    $('.userinput').addClass('animated slideInRight').show(); 
    return false; 
}); 

$(".btn-create").click(function(){ 
    removeClasses(); 
    $('.signin-panel').addClass('animated slideOutLeft'); 
    $('.signup-panel').addClass('animated slideInRight').removeClass('hidepanel slideOutLeft').show(); 
    return false; 
}); 

$("#backbtn").click(function(){ 
    removeClasses(); 
    $('.signup-panel').addClass('animated slideOutRight').removeClass('slideOutLeft'); 
    $('.signin-panel').addClass('animated slideInLeft').removeClass('hidepanel slideOutLeft'); 
    return false; 
});