How to disable custom animations from click, angular?
Question
I have Cordova application uses Ionic + Angular (Still 1.2.25)
I have my custom animations stored in one css file:
<link rel="stylesheet" href="css/animations.css">
This file has about 20 classes
In my application I have settings field Enable/Disable animation.
How can I disable loading of animations.css programmatically?
As alternative way, I thought to add some root class as prefix (lets say .animate-flag ) to all animation classes for example:
.wm-opacity-low-add, .wm-opacity-low-remove {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.wm-opacity-low,
.wm-opacity-low-add.wm-opacity-low-add-active {
opacity: 0.4;
}
.wm-opacity-low-remove.wm-opacity-low-remove-active {
opacity: 1;
}
goest to be:
.animate-flag.wm-opacity-low-add, .animate-flag.wm-opacity-low-remove {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.animate-flag.wm-opacity-low,
.animate-flag.wm-opacity-low-add.wm-opacity-low-add-active {
opacity: 0.4;
}
.animate-flag.wm-opacity-low-remove.wm-opacity-low-remove-active {
opacity: 1;
}
and when user sets animation option false - remove animate-flag class from all DOM but it seems a bit messy.
Is there other gentle way to do the same job?
Thanks,
1 answers
solution1
1 ACCPTED 2015-03-21 12:02:17
Having all your animation stored in one single CSS file you could try to "disable" it like this:
<head>
<link id="animations-css" rel="stylesheet" href="animations.css">
</head>
<body>
<button id="remove-css">Remove CSS</button>
<button id="add-css">Add CSS</button>
<script>
document.getElementById('remove-css').addEventListener('click', function(){
document.getElementById('animations-css').setAttribute('href', '');
});
document.getElementById('add-css').addEventListener('click', function(){
document.getElementById('animations-css').setAttribute('href', 'animations.css');
});
</script>
</body>
It's kind of "dirty hack" but it should work :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.