Question

我正在尝试创建没有任何框架的html应用程序。我想添加一些动画来将一个div更改为另一个div。那么它会感觉更好然后只跳一个div另一个div。使用animate.css进行动画制作。现在的问题是，当我不断地下一次回来某些时候动画不能正常工作而不是。我发现它为什么但无法解决。这是因为类没有通过点击正确添加和删除。

请检查我的例子。当我点击下一步时，它会显示另一个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或滑动方式是好还是坏但是如果你们知道任何其他解决方案的幻灯片一个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样式

2 个答案: