如何禁用自定义动画的点击，成角度？

Question

I have Cordova application uses Ionic + Angular (Still 1.2.25) 我的Cordova应用程序使用Ionic + Angular（仍然是1.2.25）

I have my custom animations stored in one css file: 我将自定义动画存储在一个CSS文件中：

<link rel="stylesheet" href="css/animations.css">

This file has about 20 classes 该文件约有20个班级

In my application I have settings field Enable/Disable animation. 在我的应用程序中，我有“设置”字段“启用/禁用动画”。

How can I disable loading of animations.css programmatically? 如何以编程方式禁用animations.css加载？

As alternative way, I thought to add some root class as prefix (lets say .animate-flag ) to all animation classes for example: 作为一种替代方法，我想为所有动画类添加一些根类作为前缀（例如说.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;
  }

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. 当用户将动画选项animate-flag false -从所有DOM中删除animate-flag类，但看起来有点混乱。

Is there other gentle way to do the same job? 还有其他温柔的方法可以完成相同的工作吗？

Thanks, 谢谢，

Answer 1

Having all your animation stored in one single CSS file you could try to "disable" it like this: 将所有动画存储在一个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>

It's kind of "dirty hack" but it should work :) 这有点“脏乱”，但应该可以:)

http://plnkr.co/edit/Ut3jLplacMctrrYIO6LP http://plnkr.co/edit/Ut3jLplacMctrrYIO6LP

如何禁用自定义动画的点击，成角度？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-21 12:02:17

如何禁用自定义动画的点击，成角度？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-21 12:02:17

解决方案1
1 已采纳 2015-03-21 12:02:17