Как удалить анимацию кнопки «Поймать материализацию»? - PullRequest
Новая
       51

Как удалить анимацию кнопки «Поймать материализацию»?

0 голосов
/ 17 декабря 2018

Я создал Плавающую кнопку действия с Материализацией , но анимация для отображения параметров при наведении курсора на кнопку занимает слишком много времени.

IЯ искал в Google и искал в документации Materialise для FAB, но я не могу найти способ удалить переход или уменьшить его продолжительность.Это единственные параметры: 

| 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, но это необязательно).

1 Ответ

0 голосов
/ 17 декабря 2018

Я предполагаю, что вы скачали css и js файл и загружаете в свой проект локально.

Вы можете унифицировать ваши js и искать эти строки в ваших unminified 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 и внес такие изменения в код.Я надеюсь, что это может помочь вам.

...