Question

有人可以告诉我如何在移动设备上查看页面动画吗？

我正在使用aos库的CSS来向页面添加一些动画。但是我想在移动设备上关闭该动画。在这方面的任何帮助将不胜感激。谢谢！

库的链接：https://michalsnik.github.io/aos/

Answer 1

也许您想使用CSS来实现，但是使用js可以很容易，您可以在初始化AOS的js文件中使用可选设置对象

像这样

AOS.init({disable: mobile,});

在这里您可以使用以下值：'phone'，'tablet'，'mobile'，布尔值，表达式或函数

有关更多选项，请检查https://github.com/michalsnik/aos

Answer 2

尝试这个对我有用的东西

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .animated {
        /*CSS transitions*/
        -o-transition-property: none !important;
        -moz-transition-property: none !important;
        -ms-transition-property: none !important;
        -webkit-transition-property: none !important;
        transition-property: none !important;
        /*CSS transforms*/
        -o-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*CSS animations*/
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }
}

Answer 3

您可以使用此js来指定何时确切地要禁用它。

AOS.init({
  disable: function() {
    var maxWidth = 800;
    return window.innerWidth < maxWidth;
  }
});

Answer 4

没有一个解决方案对我有用，

我能够在移动设备上禁用动画的唯一方法是将 aos.css 的内容包装在媒体查询中，例如：

@media only screen and (min-width:750px) {
 
 /* paste here all the content of the aos.css file */    

}

这很完美，因为它没有覆盖元素可能具有的 CSS，禁用动画而不插入。结合 Mahidul Isalm Mukto 的回应，这是完整的解决方案。

如何在手机屏幕上关闭AOS动画？

4 个答案: