手机屏幕AOS animation怎么关闭？

Question

Can anyone please tell me how to turn of animations of my page when it's being viewed by a mobile device?

I'm using aos library for css to add some animation to my page. But I want to turn that animation off on mobile devices. Any help on that regard will be greatly appreciated. Thanks!

Link of the library: https://michalsnik.github.io/aos/

Answer 1

Maybe you want to do it with CSS but it can be easy with JS. You can use optional settings object on your JS file where you initialize AOS like this:

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

Here you can use following values: 'phone', 'tablet', 'mobile', boolean, expression or function

For more options check https://github.com/michalsnik/aos

Answer 2

You can use this js to specify when exactly you want to disable it.

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

Answer 3

try this one it worked for me:

/* 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 4

None of the solutions worked for me,

The only way I was able to disable animations on mobile was by wrapping the content of aos.css within a media query such as:

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

}

This works perfectly because it doesn't overide CSS that elements could have, disables the animation without interring. Combined with Mahidul Isalm Mukto's response It was the full solution.

Answer 5

Similar to An's answer, but the class is different. This will work as of 2022 - change class to 'aos-animate':

@media only screen and (max-width: 768px) {
  .aos-animate {

    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;

    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;

    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
  }
}

Answer 6

2022 update .

This worked for me in aos 2.3.4".

@media screen and (max-width: 600px) {
  .aos-animate {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
  }
}

Answer 7

Add this on div you input AOS animation

@media only screen and (max-width:700px) {
    .class-name {
      opacity: 1 !important;
      transform: translate(0) scale(1) !important;
    }
}

it's worked for me rn