使用CSS从右至左动画滑动

Question

当前我写代码以使用jQuery显示隐藏的DIV。但是我想在窗口中出现该DIV时为该Div做出动画效果。 当我单击窗口2时，窗口2在没有动画的情况下出现。如何使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>

请帮忙。我尝试了

.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;
}

但是什么都没有改变。

谢谢。

Answer 1

您可以使用带有jQuery的CSS来创建此效果。

这是代码：

  $("#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>

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

Answer 2

您可以从jQuery

中使用.animate()

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

有关.animate()的更多信息，请参见jQuery文档：链接