Set 0 Opacity to Out animation classes

[warengonzaga]

Kindly review @eltonmesquita thank you!

Fixes #914

[daneden]

We could avoid having to maintain an exact list of selectors for out class names by using an attribute selector: https://codepen.io/daneden/pen/bbf8ad456518477c1c93048f3fada81f

[warengonzaga]

@daneden got it...

[warengonzaga]

@eltonmesquita @daneden it looks like it auto prefix all classes...

[warengonzaga]

How to exclude this [class*='Out'] from auto namespace? cc @eltonmesquita @daneden

[eltonmesquita]

True, let me check and get back to you.

[eltonmesquita]

Actually, it should be prefixed. That's the desired outcome. Can you update the PR then?
Don't forget to update your branch as it's already outdated.

[daneden]

This might do the trick:

@media (prefers-reduced-motion) {
  .animate[class*="Out"] {
    opacity: 0;
  }
}

And you should just be able to adjust the settings for postcss-prefixer:

// in postcss.config.js
// ...
'postcss-prefixer': {
  prefix,
  ignore: ['/\[class\*=.*\]/'],
},

[eltonmesquita]

I don't think it should be ignored @daneden .

/* this */
.animated[class*="Out"] {
}

/* would be transformed into */
.animate__animated[class*="Out"] {
  background-color: red;
}

The selector would still be valid and would be safer as it would consider the current prefix.

[warengonzaga]

@eltonmesquita my branch is updated I just fork a new copy yesterday...

[eltonmesquita]

There were some changes today, so it'll probably conflict of you don't update it.

[warengonzaga]

@eltonmesquita this one?

[warengonzaga]

@eltonmesquita done!

[eltonmesquita]

Yeah, @warengonzaga and @daneden was right, it's prefixing more than it should. I'll just merge it and fix on my side, ok?

[david-hollifield]

This PR is breaking some of my pages. I'm using angularjs animations with animate.css and this styling is hiding a bunch of my elements.

I have a button defined as:

<button class="btn btn-primary btn-upload animate__animated animate__fadeInDown enter-fadeInDown exit-fadeOutUp">
  Upload
</button>

In the preferred-reduced-motion scenarios my button has an opacity:0

Is the class selector too broad and catching my exit-fadeOutUp?

[warengonzaga]

Hi @david-hollifield sorry for that and yes! it catches your exit-fadeOutUp... it suppose to be for animation we have not for external class... I'll take a look into it and propose a fix thanks for reporting this!

[warengonzaga]

Hi @david-hollifield I made a quick changes in my dev version... please check this out https://github.com/WarenGonzaga/animate.css/tree/dev I add a class called xprm so you can use it as animate__xprm which means "exclude prefer-reduced-motion" so it will basically counter the opacity from the PRM class we setup on this merge. Try to use the animate.css version in my repo and let me know if it fix your end.

What do you think @eltonmesquita about my approach... I guess the user should consider that any "Out" class will be affected by this or countering it with "!important" is a good approach? Let me know! tagging @daneden

[david-hollifield]

@warengonzaga thanks! I'll take a look.

[david-hollifield]

@warengonzaga with your tweak as an example, I was able to work around this with:

body {
  @media screen and (prefers-reduced-motion: reduce), (update-frequency: slow) {
    * {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }

    *[class^="exit-"], *[class*=" exit-"] {
      opacity: 1 !important;
    }
  }
}

Thanks for your help. I'm not sure I understand the need for the initial broad selector, but I'm an idiot ;).

.animate__animated[class*='Out'] {
      opacity: 1;
}