我已经用Floating Action Button创建了Materialize,但是将鼠标悬停在按钮上时用来显示选项的动画花费的时间太长。
我在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和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合作,并在代码中进行了这种修改。希望对您有所帮助。
关于css - 如何删除Materialize Floating Action Button动画?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53808676/