twitter-bootstrap 使用css从右向左滑动动画

Slide from right to left animation using css

提问by Kalimah

currently I write code to display a hidden div using jQuery. But I want to make an animation effect for this div when it appearing in the window . When I click on the window2 then window2 is appearing without an animation . How can I make window2 coming as a slide from left to right or right to left?

目前我编写代码以使用jQuery. 但是我想在它出现在窗口中时为这个 div 做一个动画效果。当我点击 window2 然后 window2 出现没有动画。如何让 window2 从左到右或从右到左作为幻灯片出现？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <style>

      .row{
          margin-top:10%;
      }

      @media screen and (max-width: 327px) and (min-width:318px)
            { 
                .window2{
                    display:none;
                    width:20%;
                }
                #next{
                    background-color: black;
                    width:100%;
                    border:2px solid black;
                    color:white;
                    cursor:pointer;
                }
            }

  </style>


 <div class="container">
  <div class="row">
      <div class="col-sm-6 col-xs-12 window1">
          <div style="width:80%;height:50%;border:1px solid black;">
              Hiii

          </div>
          <span id="next" class="visible-xs"> window2</span>
      </div>
      <div class="col-sm-6 col-xs-10  window2">

          <div style="height:50%;border:1px solid black;">
              Hello

          </div>


      </div>
  </div>
 </div>    
  <script>
      $("#next").on("click",function(){

         $(".window2").css("display","block"); 
         $(".window2").css("margin-top","-82%"); 
         $(".window2").css("left","80%"); 

      });

 </script>

Please help . I tried

请帮忙 。我试过

.window2{
  -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

But nothing change .

但没有任何变化。

Thank you .

谢谢你 。

回答by Kalimah

You can use CSS with jQuery to create this effect.

您可以使用带有 jQ​​uery 的 CSS 来创建这种效果。

This is the code:

这是代码：

  $("#next").on("click", function() {

    $(".slideRightToLeft").addClass('show');
  });

  body {
    overflow: hidden;
    width: 100vw;
    font-family: verdana;
  }
  
  #next {
    background-color: #1BAA95;
    color: white;
    cursor: pointer;
    padding: 5px;
    width: 100%;
  }
  
  .slideRightToLeft {
    background-color: #164656;
    color: white;
    cursor: pointer;
    padding: 10px;
    margin: 5px 0;
    margin-left: 100%;
    min-width: 100%;
    transition: all 0.5s;
  }
  
  .slideRightToLeft.show {
    display: block;
    margin-left: 0%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='next'> Next
</div>

<div class='slideRightToLeft'>
  Right to Left
</div>

and this is a JSFiddle: https://jsfiddle.net/fy4qwrem/1/

这是一个 JSFiddle：https://jsfiddle.net/fy4qwrem/1/

回答by Casper Spruit

You could use .animate()from jQuery

你可以使用.animate()从jQuery

$("#window2").animate({ // id of your animated object
  display: block,
  margin-top: "-82%",
  left: "80%"
}, 1000); // time animation should take

For more information on .animate()see the jQuery documentation: Link

有关.animate()查看 jQuery 文档的更多信息：链接