显示和隐藏 div Android 样式

Question

我正在尝试创建 html 没有任何框架的应用程序。我想添加一些动画来将一个 div 更改为另一个 div。这样一来，跳一个 div 另一个 div 会感觉更好。使用 animate.css 的动画。现在的问题是当我连续下一个和后退时，有时动画不起作用并且 div 不起作用。我找到了原因但无法修复。这是因为 class 没有通过点击正确添加和删除。

请检查我的示例。当我点击 NEXT 它显示另一个 div 然后当我点击 创建一个帐户 它显示另一个 div 然后当我点击BACK返回注册页面。这是动画效果，但是当我再次单击 创建帐户 然后 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 或滑动方式是好是坏，但是如果你们知道任何其他解决方案可以将一个 div 滑动到另一个 Android 页面动画请指教

可能没有animate.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/

显示和隐藏 div Android 样式

show and hide div Android style

javascript

jquery

html

css

animate.css