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

Question

我想在点击特定链接时显示我的 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();

});

Answer 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>