显示和隐藏div Android风格

Question

我试图创建没有任何框架的HTML应用程序。我想添加一些动画改变一个div到另一个div。那么它会感觉更好，然后跳一个div另一个div。使用animate.css进行动画。现在的问题是，当我连续下一步，有时动画不工作和股利没有。我发现它为什么是但不能修复。这是因为类没有添加和点击正确删除。

请检查我的例子。当我点击NEXT它显示另一个div，然后当我点击创建一个帐户它显示另一个div然后当我点击返回它回来注册页面。这是动画工作，但再次当我点击创建一个帐户然后div移动（登录页面），但另一个div（注册页面）不显示。

演示 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上感觉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; 
});