顯示和隱藏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; 
});