根据屏幕尺寸禁用动画

Question

我正在使用 waypoints.js 制作动画，并且我有以下功能可以使用

$(document).ready(function(){
  "use strict"; 
    $('.slogan').waypoint(function(direction) {             
        $('.onelogo').toggleClass('hide', direction === 'down');
    });
});

但上面的唯一问题是动画仍然在移动设备上播放，所以看完后我尝试实现以下内容

$(document).ready(function(){
    $(window).resize(function () {
        width=$(window).width();
        if (width > 950){
            var waypoints = document.querySelectorAll('.slogan');
            for (var i = waypoints.length - 1; i >= 0; i--) {
                var waypoint = new Waypoint({
                    element: waypoints[i],
                    handler: function(direction) {
                        this.element.classList.toggle('.hide');
                    },
                    offset: '60%',
                });
            }
        } else {
            // less then 950 px.
            if ($(".onelogo").hasClass(".hide")) {
                $(".onelogo").removeClass(".hide"); 
            }
        }
    });
});

但是这样做动画根本不播放

html

<div class="slogan">        
        <img class="onelogo" src="http://via.placeholder.com/350x150">
</div>

css

.slogan {
    display: block;
    position: absolute;
    right: 10%;
    top: 40%;
    line-height: 34px;
    color: #949494;
    z-index: 10;
}

.onelogo {
    display: block;
    height: 110px;
    width: auto;
     -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}       

.hide {
  opacity: 0;
  margin-top: -29vh;
}

Answer 1

我不熟悉 waypoints，但您可以尝试将您的逻辑包装在一个函数中，然后在 $(document).ready 和 $(window).resize 上调用它：

function toggleAnimation(){
    width=$(window).width();

    if (width > 950){
    var waypoints = document.querySelectorAll('.slogan');
        for (var i = waypoints.length - 1; i >= 0; i--) {
            var waypoint = new Waypoint({
                element: waypoints[i],
                handler: function(direction) {
                    this.element.classList.toggle('.hide');
                },
                offset: '60%',
            });
         }
    } else {
       // less then 950 px.
       if ($(".onelogo").hasClass(".hide")) {
           $(".onelogo").removeClass(".hide"); 
       }

    }
}

然后打电话...

$(document).ready(function(){
    toggleAnimation();

    $(window).resize(function(){
        toggleAnimation();
    }); 
})

Answer 2

你喜欢当屏幕尺寸小于950px时停止动画吗？我不知道，但我认为你可以试试这个：

var waypoints = null;
$(document).ready(function() {
    $(window).resize(function () {
        width=$(window).width();
        if (width > 950) {
            ...
        } else if (waypoints != null) {
            waypoints.disable() //or waypoints.destroy() if new instance
        }
    });
});

Answer 3

最简单的方法是在 $(document).ready() 上添加航点，然后根据 window 大小调用航点 enable / disable。

<script>
var waypoint;
function handleWayPoint() {
    var $width = $(window).width();
    console.log($width);
    if($width > 950) {
      waypoint[0].enable();
    }
    else {
        waypoint[0].disable();
    }
  }

$(document).ready(function(){
  "use strict";
   waypoint= $('.slogan').waypoint(function(direction) {             
         $('.onelogo').toggleClass('hide', direction === 'down');
   });
   handleWayPoint();

   $(window).resize(function() {
      handleWayPoint();
   });
});
</script>

除了我在评论中提到的错误之外，您的其他代码的主要问题是这一行：this.element.classList.toggle('.hide'); this in JavaScript 的工作方式与实际情况完全不同在其他语言中（Java，例如 C++）。通常，JavaScript 中的this 设置为点运算符左侧的对象（尽管也有例外）。 This post goes into greater detail.

Here is a fiddle

根据屏幕尺寸禁用动画

Disable animation based on screen size

jquery

jquery-waypoints