Skip to content

Instantly share code, notes, and snippets.

@yayMark
Created November 24, 2017 02:23
Show Gist options
  • Save yayMark/1e0442d7f49e18cd1e0e7075077e1e83 to your computer and use it in GitHub Desktop.
Save yayMark/1e0442d7f49e18cd1e0e7075077e1e83 to your computer and use it in GitHub Desktop.
Applying styling to a button contained within a translucent parent div on a CSS animation end. Applied a stronger background colour instead!
var newsArticles = document.querySelectorAll('.desktop .newspanel .news-article');
for (var i = 0; i < newsArticles.length; i++) {
(function() {
var element = newsArticles[i];
element.addEventListener('animationend', function() {
var style = window.getComputedStyle(element);
var opacity = style.getPropertyValue('opacity');
var selector = '.desktop .btn';
var button = element.querySelector(selector);
if (opacity == 0.9) {
button.setAttribute('style', 'opacity: 1;background-color:rgba(0,0,0,1)');
} else {
button.setAttribute('style', 'opacity: 0');
}
});
})();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment