在 div 中添加上滑动画

Question

我正在制作一个包含一些 div 的全宽和全高网站。我在每个 div 的底部添加了一个导航按钮。如果用户单击按钮，则会出现下一页/ div。但我想添加一些上滑动画，以便页面/div 带有动画。我怎样才能做到这一点？

这里是网站链接http://server2020.tk/wordpress/

你会在底部找到一个新闻按钮

Answer 1

看看 CSS 动画或 jquery 效果。

在 jquery 中你想要的就是盲人。 http://jqueryui.com/effect/

Answer 2

您可以使用 CSS 最有效地做到这一点。由于您没有提供任何代码，我将给出一个一般性的答案。搜索 CSS 过渡。你可以找到很多关于这个主题的 sn-ps。

var fadeOut = function() {
    return $('.container div').animate({
        opacity: 0.25,
        margin: '+=250'
    }, 2000);
};
var transitionToView = function($view) {
//    $.when( fadeOut )
//        .pipe( $('.container div').removeClass('active') );
    var $allViews = $('.view');
    var $activeViews = $('.view-active');

    $activeViews.removeClass('view-active').addClass('view-deactive');

    //$allViews.removeClass('view-active').addClass('view-deactive');

    $view.removeClass('view-deactive').addClass('view-active');

    //alert('hi');
};

$('#showA').click(function() {
    transitionToView($('#viewA'));
});
$('#showB').click(function() {
    transitionToView($('#viewB'));
});
$('#showC').click(function() {
    transitionToView($('#viewC'));
});

body { color: white; }

.container {
/*    overflow: hidden; */
    position:relative;
}
.innerContainer{
/*    width:100%; */
}


@-webkit-keyframes floatOut {
    from {
        opacity: 1;
        -webkit-transform: translate(-200px, 0);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-500px, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate(0, 0);
    }
}


.view{
    position: absolute;
    /* float: left; */
    padding:0;
    margin:0;
    opacity: 0;
    left:200px;
    width:300px;
    height:200px;
}
.view-active{
    -webkit-transition: all 0.8s ease-out, opacity 0.4s ease-out;
    -webkit-transform: translate(-200px, 0);
    opacity: 1;
}
.view-deactive{
    -webkit-animation-name: floatOut;
    -webkit-animation-duration: .8s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-out;
/*    
    -webkit-transition: all 0s ease-in, opacity 0s ease-out;
    -webkit-transform: translate(0, 0);
    opacity: 0; 
    -webkit-transition-delay: 0.4s;
    */
    */
    /*
    -webkit-transition: all 0.8s ease-out;
    -webkit-transition-delay: 0.4s;
    */
}

/*
.view-exist{
    -webkit-transition: all 0.4s ease-in, opacity 0.4s ease-out;
    -webkit-transform: translate(-500px, 0);
    opacity: 0;
    -webkit-transition-delay: 0.8s;
}
*/
/*
    -webkit-transition: display 0.8s ease;
  -webkit-transition: opacity 0.8s ease;
  -webkit-transition: margin-left 0.8s ease;
    */
/*
  -webkit-transition: all 0.8s ease-in-out;
  -webkit-transition: background 0.8s ease;
    -webkit-transition-property: background;
  -webkit-transition: all 0.8s ease-in-out;
    */
    /*
  -webkit-transition: all 0.8s ease-in-out;
  -webkit-transition-duration: 0.7s;
  -webkit-transition-timing-function: ease-in-out;
    */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showA">A</button><button id="showB">B</button><button id="showC">C</button>
<div class="container">
    <div class="innerContainer">
        <div id="viewA" style="background-color:blue" class="view">VIEW A</div>
        <div id="viewB" style="background-color:red" class="view ">VIEW B</div>
        <div id="viewC" style="background-color:green" class="view ">VIEW C</div>
    </div>
</div>

您必须先隐藏该元素，然后通过更改将投射 CSS 过渡的值来显示它。

Answer 3

我不确定你真正想做什么，但也许你可以使用 jQuery 动画功能：

$(element).animate({scrollTop: val}, time);

这是一个简单的例子。

$("a").click(function(e) {
    e.preventDefault();
    var nextSection = $(this).attr("href");
    $(".container").stop(true, true).animate({
        scrollTop: "+=" + $(nextSection).offset().top
    }, 500);
});

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section {
    width: 100%;
    height: 100%;
    background: #efefef;
    position: relative;
}

.section:nth-child(even) {
    width: 100%;
    height: 100%;
    background: #434343;
}

.section h1 {
    margin: 0;
    padding: 5px 0;
    text-align: center;
    color: #434343;
}

.section:nth-child(even) h1 {
    color: #efefef;
}

.section a {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    background: red;
    border-radius: 100%;
    text-align: center;
    line-height: 100px;
    text-decoration: none;
    color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div id="section1" class="section">
        <h1>Section 1</h1>
        <a href="#section2">Section 2</a>
    </div>
    <div id="section2" class="section">
        <h1>Section 2</h1>
        <a href="#section3">Section 3</a>
    </div>
    <div id="section3" class="section">
        <h1>Section 3</h1>
        <a href="#section4">Section 4</a>
    </div>
    <div id="section4" class="section">
        <h1>Section 4</h1>
        <a href="#section1">Section 1</a>
    </div>
</div>