如何在不干扰内部内容的情况下为我的 div 设置动画以从上到下移动？答案

【问题标题】：How can I animate my div to go from top to bottom whithout interfering with the content inside?如何在不干扰内部内容的情况下为我的 div 设置动画以从上到下移动？
【发布时间】：2014-11-29 03:37:32
【问题描述】：

我想在点击特定链接时显示我的 div。

当调用这个函数时，我想动画我的 div 从上到下滑动。

就像在 Android 上一样，当您按下该栏并显示内容时。

我想在不干扰 div 内容的情况下这样做。

我该怎么做？谢谢。

http://jsfiddle.net/8qmj5tjx/

HTML

 <a class="respfc" href="#"><span class="sn">Click</span></a>

    <div class="persside">
    Text here
    <br><br>
    Text here
    <br><br>
    Text here
    <br><br>
    Text here
    <br><br>
    Text here
    <br><br>
    Text here
    <br><br>
    Text here
    </div>

CSS

div.persside {
    background-color: rgba(38,38,38,0.9);
    width: 50%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    position: fixed;
    overflow: hidden;
    display: none;
}

jQuery

 $( ".sn" ).click(function() {

  $(".persside").show();

});

【问题讨论】：

您可以通过将 div 的位置设置在可见屏幕上方，然后将其位置向下设置动画来做到这一点。不过，您会遇到的一个问题是知道可见屏幕的高度并让您的 div 内容流动以匹配。

标签： jquery css

【解决方案1】：

DEMO你可以使用css3 transform: translateY(-100%)和transition: transform .3s ease并使用Jquery来addCLass或者toggleClass激活

 $( ".sn" ).click(function() {
 
  $(".persside").addClass("active");

});

    div.persside {
        background-color: rgba(38,38,38,0.9);
        width: 50%;
        height: 100%;
        z-index: 10;
        top: 0;
        left: 0;
        position: fixed;
        overflow: hidden;
        transform: translateY(-100%);
        transition: transform .3s ease
    }
    div.persside.active {
        transform: translateY(0%)
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class="respfc" href="#"><span class="sn">Click</span></a>

<div class="persside">Text here
<br><br>
Text here
<br><br>
Text here
<br><br>
Text here
<br><br>
Text here
<br><br>
Text here
<br><br>
Text here
</div>

同样的结果可以用 Pure javascript 像这样

function toggleMe(){
    persside.classList.toggle("active")
}

var sn = document.querySelector(".sn"),
    persside = document.querySelector(".persside");

sn.addEventListener("click", toggleMe, false);

    div.persside {
        background-color: rgba(38,38,38,0.9);
        width: 50%;
        height: 100%;
        z-index: 10;
        top: 0;
        left: 0;
        position: fixed;
        overflow: hidden;
        transform: translateY(-100%);
        transition: transform .3s ease
    }
    div.persside.active {
        transform: translateY(0%)
    }

 <a class="respfc" href="#"><span class="sn">Click</span></a>

<div class="persside">Text here
<br><br>
Text here
<br><br>
Text here
<br><br>
Text here
<br><br>
Text here
<br><br>
Text here
<br><br>
Text here
</div>

【讨论】：

【解决方案2】：

试试这个

$(document).ready(function() {
   $('.sn').click( function() { 
            $('.persside').toggle();
        });

});

【讨论】：

【解决方案3】：

您可以通过进行以下更改来做到这一点，因为您可以设置时间以及要显示的数量，从而为您提供优势：

CSS：

height:0px;
//display:none;

Javascript：

$(".persside").animate({"height": $(window).height()},600);

下面是工作示例：http://jsfiddle.net/8qmj5tjx/6/

【讨论】：

【解决方案4】：

演示 - http://jsfiddle.net/8qmj5tjx/1/

您可以使用transform: translateY(); 将时间transition: 2s linear; 更改为您想要的时间

 $(".sn").click(function() {
   $(".persside").addClass('active');
 });

div.persside {
  background-color: rgba(38, 38, 38, 0.9);
  width: 50%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: 2s linear;
}
div.persside.active {
  transform: translateY(0%);
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="respfc" href="#"><span class="sn">Click</span></a>

<div class="persside">Text here
  <br>
  <br>Text here
  <br>
  <br>Text here
  <br>
  <br>Text here
  <br>
  <br>Text here
  <br>
  <br>Text here
  <br>
  <br>Text here</div>

或者您也可以使用top首先设置位置顶部-100%，然后在添加活动类时将位置顶部更改为0

演示 - http://jsfiddle.net/8qmj5tjx/5/

 $(".sn").click(function() {
   $(".persside").addClass('active');
 });

div.persside {
  background-color: rgba(38, 38, 38, 0.9);
  width: 50%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  top: -100%;
  transition: 2s linear;
}
div.persside.active {
  top: 0;
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="respfc" href="#"><span class="sn">Click</span></a>

<div class="persside">Text here
  <br>
  <br>Text here
  <br>
  <br>Text here
  <br>
  <br>Text here
  <br>
  <br>Text here
  <br>
  <br>Text here
  <br>
  <br>Text here</div>

【讨论】：

【解决方案5】：

CSS

div.persside {
    width: 50%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    position: fixed;
    overflow: hidden;
}

JS

$( ".sn" ).click(function() { 
  var tar =  $('.persside');
         tar.animate({top: tar.height()/2 - tar.outerHeight()/2}, {duration: 500, queue: false}); 
});
$(function(){
    $('.persside').css('top', ($('.persside').height() * -1)+ "px")
});

http://jsfiddle.net/8qmj5tjx/19/

希望如你所愿！

【讨论】：