我有 Cordova 应用程序使用 Ionic + Angular(仍然是 1.2.25)
我将我的自定义动画存储在一个 css 文件中:
<link rel="stylesheet" href="css/animations.css">
这个文件有大约20个类
在我的应用程序中，我有设置字段启用/禁用动画。
如何以编程方式禁用 animations.css 的加载？
作为替代方法，我想添加一些根类作为前缀(比如 .animate-flag)到所有动画类，例如:
.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;
}
将成为:
.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;
}
当用户设置动画选项 false - 从所有 DOM 中删除 animate-flag 类，但它看起来有点乱。
是否有其他温和的方法来完成同样的工作？
谢谢，
最佳答案
将所有动画存储在一个 CSS 文件中，您可以尝试像这样“禁用”它:
<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>
这是一种“肮脏的技巧”，但它应该有效:)
关于javascript - 如何禁用点击、 Angular 自定义动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29182203/