如何禁用自定義動畫的點擊，成角度？

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