如何删除 Materialise Floating Action Button 动画？答案

【问题标题】：How to remove Materialize Floating Action Button animation?如何删除 Materialise Floating Action Button 动画？
【发布时间】：2018-12-17 03:40:14
【问题描述】：

我用Materialize 创建了一个Floating Action Button，但是当您将鼠标悬停在按钮上时显示选项的动画需要很长时间。

我在 Google 上搜索并查看了 FAB 的 Materialize 文档，但我找不到任何方法来删除过渡或减少过渡的持续时间。这些是唯一的选择：

| Name           | Type    | Default | Description                                                       |
|----------------|---------|---------|-------------------------------------------------------------------|
| direction      | String  | 'top'   | Direction FAB menu opens. Can be 'top', 'right', 'buttom', 'left' |
| hoverEnabled   | Boolean | true    | If true, FAB menu will open on hover instead of click             |
| toolbarEnabled | Boolean | false   | Enable transit the FAB into a toolbar on click                    |

通过添加click-to-toggle 类，还有另一个选项可以在单击而不是悬停时显示选项，但这仍然有动画。

如何删除动画？

^{（减少持续时间也是可以接受的）}

这里有一个 StackSnippet 来演示动画：

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems);
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
  </ul>
</div>

（此外，如果将waves-effect 类添加到按钮，动画会更慢。我想保留waves-effect 类，但这是可选的）。

【问题讨论】：

标签： css animation materialize floating-action-button

【解决方案1】：

我假设您下载了 css 和 js 文件并在本地加载到您的项目中。

您可以取消缩小您的 js 并在未缩小的 js 中查找这些行：

key: "_animateInFAB",
  value: function() {
    var e = this;
    this.$el.addClass("active");
    var i = 0;
    this.$floatingBtnsReverse.each(function(t) {
      s({
          targets: t,
          opacity: 1,
          scale: [.4, 1],
          translateY: [e.offsetY, 0],
          translateX: [e.offsetX, 0],
          duration: 275, //this is duration in ms for opening fab.
          delay: i,
          easing: "easeInOutQuad"
      }), i += 40
    })
}

一旦你找到了这些行，就可以根据需要更改持续时间，但这只会影响开放持续时间。几行下来，你可以看到类似的关闭代码。我很久以前就使用 Materialise，我在代码中进行了这种修改。我希望这可以帮助你。

【讨论】：