css过渡——实现元素的飞入飞出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body style="height:2000px">
    <div style="margin-top:1000px;overflow: hidden;">
        <div id="demo" style=" 500px;height: 300px; background-color: red;transition: all 1s; opacity: 0.1;"></div>
    </div>
</body>

</html>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>
    $(window).scroll(function (e) {
        //元素
        var demo = $("#demo");

        //滚动条滚动的高度
        var scrollTop = $(document).scrollTop();
        //浏览器可视化区域的高度
        var docHeight = $(window).height();

        //滚动最小位置，开始动画
        var mintop = demo.offset().top + demo.height() - docHeight;
        //滚动最大位置，开始动画
        var maxtop = demo.offset().top;

        //在一定范围内，开始过度动画，出了范围，就将过度动画还原为未执行时的样式
        if(mintop <= scrollTop && maxtop >= scrollTop){
            //开始动画
            demo.css({
                "opacity":1,
                "margin-left":"500px"
            })
        }
        else{
            //还原动画
            demo.css({
                "opacity":0.1,
                "margin-left":"0px"
            })
        }
    });
</script>