此篇延续上一篇元件样式修改，此篇着重在元件的动态效果样式。

option 参数

撰写动态效果起手式。

$enable-reduced-motion:             false !default;

enable-reduced-motion：禁止动画、过渡设置（预设是 true）

互动视窗 (Modal)

介绍几个 modal 常调参数

$modal-transition：设置动画时间。
$modal-fade-transform：modal 视窗渐入动画效果。
$modal-show-transform：modal 视窗渐出动画效果。

// 预设效果往下移位 
$modal-fade-transform: translate(0, -50px);

// 放大效果 
$modal-fade-transform: scale(0.8);

$modal-show-transform vs. $modal-fade-transform

• $modal-show-transform：渐变移入到 modal-dialog 设置的位置。
• $modal-fade-transform：从 modal-dialog 设置的位置渐变移出。

因此查看 $modal-show-transform、$modal-fade-transform 两者样式，会发觉两者的样式有看似相反的效果。

位置 (Position)

常用於将元素固定在某个位置。

Step1：设置 top、left、right、bottom 属性

Step2：设置 sticky、fixed 属性

示范将选单固定在最上方

<header class="position-sticky top-0 bg-white">
  <nav></nav>
</header>

position-sticky vs. position-fixed

position-fixed

一直固定於画面上。

特性

• 独立建立一层，且会固定在画面上。（不受视窗卷轴引响）

position-sticky

当 viewport 卷动到超过元素位置後才黏在画面上。

特性

• 作用於父层，当父层元素超过 viewport 子元素还是会被跟着卷动。

限制

• 父层不能设置 overflow: hidden，否则会因为无法卷动而失效。

建议

• 如果元素不是在最上面或最下面时，我会选择使用 position-sticky，或使用 js 来判断 position-fixed 的触发时机。

background-attachment

实现基本的视差滚动效果，bootstrap 原生没有这个属性，需要自行撰写。

透过通用类别撰写 background-attachment 样式。

"background-attachment": (
  responsive: true,
  property: background-attachment,
  class: bga,
  values: (
    scroll: scroll,
    fixed: fixed,
    local: local
  ),
)

编译後的 css

.bga-scroll {
  background-attachment: scroll !important;
}
.bga-fixed {
  background-attachment: fixed !important;
}
.bga-local {
  background-attachment: local !important;
}

撰写 html以及背景图片样式。

.header-banner {
  background: url(../images/ricardo-gomez-angel-UrOZTfXT0h0-unsplash.jpg) no-repeat center/cover;
  height: 480px;
}

<div class="header-banner bga-fixed"></div>

background-attachment 有支援度的问题。

下方图片左边为 mobile 画面，因为 ios 支援度问题，导致 background-attachment 没有正常缩放，而变成原始大小被裁切过後的图片。

原因

• 对於 ios mobile 的浏览器来说 background-attachment 太吃效能了，因此不支援（说不定未来手机效能突飞猛进哪天就支援了）

参考文章：How to replicate background-attachment fixed on iOS [duplicate]

解决办法

• 下断点使其作用於 PC 版以上。（透过通用类别样式）

<div class="header-banner bga-lg-fixed"></div>

更换 icon

Bootstrap 有许多元件都有提供类似下拉选单的功能以及不同的 icon，这边会示范将 icon 更换为 Font Awesome 的方法。

先谈谈为更换 icon 的好处

• 客制化 icon 样式
• 设置 icon 颜色

手风琴 (Accordion)

variable 参数

隐藏 accordion icon 的参数。

$accordion-icon-width:              none !default;
$accordion-button-icon:             none !default;
$accordion-button-active-icon:      none !default;

样式覆盖

直接复写 .accordion-button::after 样式，覆盖为 Font Awesome 的 icon 样式。

.accordion-button::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f078";
}

两步骤设置 Font Awesome

官方文件 CSS Pseudo-elements 伪元素使用方法

Step1：查看 icon style、unicode 代码

Step2：设置样式（font-family、font-weight、content）

font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f078";

参数解析

font-family、font-weight 参数请参考官方文件中的对应表。

font-family：依照 icon style 来选择对应的 font-family。
font-weight：依照 icon style 来选择对应的 font-weight。
contnet：依照 icon style 来输入对应的 unicode 代码。

小技巧

font-family 使用多种参数

font-family: "Font Awesome 5 Solid","Font Awesome 5 Free";

font-weight 预设是 400

• 因此对应 400 的 Style 可以省略（Regular、Brands、Uploaded Icons），之外的（Solid、Light、Duotone）都需要而外设置 font-weight，否则不会显示！！