前言
最近在开发FA项目时使用到switch开关组件，该switch组件是基于JS扩展的类Web开发范式组件中的基础组件 。在使用的过程中发现了一些问题，比如：
1、设置宽高等样式属性不会改变switch组件本身的宽高，而是会修改switch组件的内边距。
2、switch组件存在一定比例的缩放。
使用switch组件在页面布局时存在上述等问题，但可通过一些技术手段（transform属性的scale）或一些替代方案，达到预期效果。基于此，通过现在已掌握的FA相关知识实现一个简单的自定义switch开关组件。
效果展示
实现原理
基于css关键帧动画animation和@keyframes，通过对switch的滑块设置css属性position: absolute，并添加相应的动画class，即可达到switch开关的过渡效果。给switch设置固定的宽度和高度，保证switch组件不被缩放，在switch组件的外层包裹div组件，来实现布局的合理性。
css动画样式官方指导API：
属性名称 | 数据类型 | 默认值 | 描述 |
transform | string | - | 支持同时设置平移/旋转/缩放等属性。 |
animation6+ | string | 0s ease 0s 1 normal none running none | 格式：duration | timing-function | delay | iteration-count | direction | fill-mode| play-state | name，每个字段不区分先后，但是 duration / delay 按照出现的先后顺序解析。 |
animation-name | string | - | 指定@keyframes的名称。 |
animation-fill-mode | string | none | 指定动画开始和结束的状态：1、none：在动画执行之前和执行之后都不会应用任何样式到目标上；2、forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）；3、backwards6+：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。4、both6+：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 |
animation-duration | 0 | 定义一个动画周期。支持的单位为[s(秒) | ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。（注意：animation-duration 样式必须设置，否则时长为 0，则不会播放动画。） | |
animation-delay | 0 | 定义动画播放的延迟时间。支持的单位为[s(秒) | ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。 | |
translateX | - | X轴方向平移动画属性。 |
实现过程
switch组件 hml 部分：
<div class="define-switch">
<div class="switch-wrapper {{ isChecked ? 'bg-blue' : 'bg-grey'}}" onclick="handleClick">div>
<div class="switch-block {{ isChecked ? 'closed' : 'opened'}}">div>
div>switch组件 css 部分：
.define-switch {
position: relative;
padding: 2px;
}
.switch-wrapper {
position: relative;
width: 36px;
height: 20px;
background-color: rgba(0,0,0,0.05);
border-radius: 25px;
}
.switch-block {
position: absolute;
left: 2px;
top: 2px;
width: 16px;
height: 16px;
background-color: #FFFFFF;
border-radius: 8px;
}
.opened {
animation-name: open;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.closed {
animation-name: close;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.bg-blue {
background-color: #0A59F7;
}
.bg-grey {
background-color: rgba(0,0,0,0.05);
}
@keyframes open {
from {
transform: translateX(16px);
}
to {
transform: translateX(0px);
}
}
@keyframes close {
from {
transform: translateX(0px);
}
to {
transform: translateX(16px);
}
}switch组件 js 部分：
export default {
name: 'DefineSwitch',
data() {
return {
isChecked: false,
}
},
handleClick(evt) {
console.log('事件对象event：' + JSON.stringify(evt) + this.isChecked);
this.isChecked = ! this.isChecked; // 修改isChecked的值
this.$emit('switchChange', {checked: this.isChecked}); // 向父组件传递值
}
}父组件 hml中：
<element name="mySwitch" src="../mySwitch/mySwitch.hml">element>
<div style="width: 40px; height: 24px;">
<mySwitch @switch-change="handleSwitchChange">mySwitch>
div>父组件 js中：
handleSwitchChange(e) {
console.log('子组件传来的数据' + e.detail.checked); // 父组件中获取到switch的开关状态
}实现中遇到的问题及解决方案：
问题描述：在实现关键帧动画时switch滑块执行完最后一帧动画后会回到原来的位置，导致动画执行效果不理想。
原因分析：动画属性animation的animation-fill-mode属性默认为none（ 在动画执行之前和之后都不会应用任何样式到目标上 ）。
解决方案：将animation-fill-mode属性设置为 forwards （ 在动画结束后，目标将保留动画结束时的状态 ）。
总结
此自定义组件是对css关键帧动画、父子组件通信的回顾。
