使用css从右向左滑动动画答案

【问题标题】：Slide from right to left animation using css使用css从右向左滑动动画
【发布时间】：2017-04-19 20:31:08
【问题描述】：

目前我使用jQuery 编写代码来显示隐藏的 div。但是我想在这个 div 出现在 window 时为其制作动画效果。当我单击 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>

请帮忙。我试过了

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

但没有任何改变。

谢谢。

【问题讨论】：

你能做一个小提琴吗
daneden.github.io/animate.css 最适合 css 动画并且非常易于使用

标签： jquery twitter-bootstrap css css-transitions

【解决方案1】：

您可以使用 CSS 和 jQuery 来创建这种效果。

这是代码：

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

【讨论】：

【解决方案2】：

您可以使用.animate() 中的jQuery

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

有关.animate() 的更多信息，请参阅 jQuery 文档：Link

【讨论】：