Floating Action Button（简称 FAB）是 Google 推出的 Material Design 设计语言中一种常用的交互控件，可用于展示应用的主要操作，如新建、添加、分享等。本文将逐步介绍如何在前端项目中优化和使用 FAB 控件，包括样式、位置、交互等方面。
1. FAB 样式优化
在 Material Design 中，FAB 控件有两种样式：默认样式和扁平化样式。默认样式是带有阴影和浮起效果的，而扁平化样式则没有阴影和浮起效果，更加简洁。根据实际需求和项目设计要求，可以适当选择不同的样式。
示例代码如下：（HTML）
<button class="btn btn-fab btn-default"> <i class="material-icons">add</i> </button> <button class="btn btn-fab btn-flat"> <i class="material-icons">add</i> </button>
对应的 CSS 样式如下：
// www.javascriptcn.com code example
.btn-fab {
width: 56px;
height: 56px;
border-radius: 28px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
font-size: 24px;
color: #fff;
}
.btn-default {
background-color: #2196f3;
}
.btn-flat {
background-color: #9e9e9e;
box-shadow: none;
}在实际项目中，还可以根据需求进行更加细致的样式调整，如修改颜色、字体、阴影等。
2. FAB 位置优化
FAB 控件的位置一般放在应用的主要操作区域，如屏幕右下角。但是在不同的页面和场景中，FAB 控件的位置可能需要进行调整。下面是一些常见的 FAB 位置调整方式：
2.1 固定位置
如果 FAB 控件在应用的多个页面上都使用，可以考虑将其位置固定在页面的底部或右下角，方便用户在不同页面中使用。
示例代码如下：
.fab-fixed {
position: fixed;
right: 16px;
bottom: 16px;
}<div class="fab-fixed">
<button class="btn btn-fab btn-default">
<i class="material-icons">add</i>
</button>
</div>2.2 相对位置
在某些情况下，FAB 控件需要根据页面的滚动进行相对位置调整。此时可以通过 JavaScript 监听页面滚动事件，计算 FAB 控件所在节点的位置，然后进行相应的位置调整。
示例代码如下：
// www.javascriptcn.com code example
<div class="content" id="scroll-container">
<!-- ... -->
</div>
<div class="fab-relative">
<button class="btn btn-fab btn-default">
<i class="material-icons">add</i>
</button>
</div>// www.javascriptcn.com code example
.fab-relative {
position: absolute;
bottom: 16px;
right: 16px;
}
.fab-hidden {
visibility: hidden;
}// www.javascriptcn.com code example
const scrollContainer = document.querySelector("#scroll-container");
const fab = document.querySelector(".fab-relative");
window.addEventListener("scroll", () => {
const fabOffsetTop = fab.offsetTop;
const isHidden = fab.classList.contains("fab-hidden");
if (window.scrollY > fabOffsetTop && !isHidden) {
fab.classList.add("fab-hidden");
}
if (window.scrollY < fabOffsetTop && isHidden) {
fab.classList.remove("fab-hidden");
}
});3. FAB 交互优化
FAB 控件最重要的作用是触发应用的主要操作功能，因此 FAB 控件的交互体验也尤为重要。下面是一些常见的 FAB 交互优化技巧：
3.1 半透明遮罩
当用户点击 FAB 控件时，可以在 FAB 控件上方添加一个半透明的遮罩，以提高用户体验。
示例代码如下：
// www.javascriptcn.com code example
.fab-mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.2);
display: none;
z-index: 1000;
}
.fab-show-mask .fab-mask {
display: flex;
justify-content: center;
align-items: center;
}<div class="fab">
<button class="btn btn-fab btn-default">
<i class="material-icons">add</i>
</button>
<div class="fab-mask"></div>
</div>// www.javascriptcn.com code example
const fab = document.querySelector(".fab");
const mask = fab.querySelector(".fab-mask");
fab.addEventListener("click", () => {
fab.classList.add("fab-show-mask");
setTimeout(() => {
fab.classList.remove("fab-show-mask");
}, 1000);
});3.2 打开动画
在打开 FAB 控件之前，可以添加一个过渡动画，以提高用户体验。在过渡动画中，可以将 FAB 控件旋转、渐变或扩散开来。
示例代码如下：
// www.javascriptcn.com code example
.fab-rotate {
animation: rotate .3s linear;
}
@keyframes rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(45deg);
}
}
.fab-scale {
animation: scale .3s ease;
}
@keyframes scale {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.fab-fade {
animation: fade .3s ease;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}// www.javascriptcn.com code example
const fab = document.querySelector(".fab");
const mask = fab.querySelector(".fab-mask");
fab.addEventListener("click", () => {
fab.classList.add("fab-rotate", "fab-scale", "fab-show-mask");
setTimeout(() => {
fab.classList.remove("fab-rotate", "fab-scale", "fab-show-mask");
}, 1000);
});4. 结语
由于 FAB 控件受到了 Material Design 语言的大力推广和应用，因此它也成为了前端开发中常用的控件之一。在实际的使用中，可以根据不同的需求和场景进行样式、位置、交互等方面的优化，从而提升 FAB 控件的使用体验和效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ce818fe46428fe9e8ccc11