显示和隐藏 div 安卓风格

Question

我正在尝试在没有任何框架的情况下创建HTML应用程序。 我想添加一些动画来将一个div 更改为另一个div。 所以这样感觉会更好，然后只是跳一个div另一个div。 对于使用 Animate .css 进行动画。 现在的问题是当我连续下一个和返回某个时候动画不起作用并且div 不起作用时。 我找到了为什么，但无法修复。 这是因为类不添加和删除通过点击正确。

请检查我的例子。 当我单击"下一步"时，它会显示另一个div，然后当我单击"创建帐户"时，它会显示另一个div，然后当我单击"返回"

时，它又是返回注册页面。 这是动画工作，但当我单击"创建帐户"时，div再次移开（登录页面），但另一个div（注册页面）未显示。

演示https://jsfiddle.net/cyber007/u78adoto/1/

目录

<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 或滑动方式是好是坏，但如果你们知道将一个div 滑动到另一个div 的任何其他解决方案，并且觉得 Android 页面动画请指教。

可能没有动画.css也可能只是使用CSS动画进行位置过渡

Answer 1

这是因为当你经历事情时，你仍然有元素上的类。动画完成后，我会删除元素上的类。

但是，如果这样做，它将恢复为旧样式，而没有类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;
});

Answer 2

最后我做到了。 手动，但如果有任何这样的脚本，它会。 可能是某种滑块代码将起作用。 此处更新的代码

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