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

Question

我的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;
  }

当用户将动画选项animate-flag false -从所有DOM中删除animate-flag类，但看起来有点混乱。

还有其他温柔的方法可以完成相同的工作吗？

谢谢，

Answer 1

将所有动画存储在一个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>

这有点“脏乱”，但应该可以:)

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