mint-ui 中的 Palette Button
这个还是相对简单的 一个组件
首先介绍三个事件(我之前竟然还不知道这三个事件。。。)
animation 事件 CSS3动画事件
animationstart css3 开始动画
animationiteration css3 动画重复播放时 触发
animationend css3 动画结束 后触发
然后介绍一下执行的 步骤
1、通过 touchstart 事件 来 触发 toggle => 包含了 缩回、放出 两个函数
"touchstart": _vm.toggle
2、通过 toggle 函数 判断当前处于什么状态，
toggle
:
function
(
event
)
{
if (
!
this
.
transforming)
{
if (
this
.
expanded)
{
this
.
collapse(
event)
}
else
{
this
.
expand(
event)
}
}
3、执行 collapse 或 expand 函数
expand
:
function
(
event
)
{
this
.
expanded
=
true
this
.
transforming
=
true
this
.
$emit(
'
expand
'
,
event)
},
collapse
:
function
(
event
)
{
// 折叠
this
.
expanded
=
false
this
.
$emit(
'
collapse
'
,
event)
}
4、执行了 这个之后 ，通过
class: {
expand: _vm.expanded, 'mint-palette-button-active': _vm.transforming
},
vue 的 :class 来动态 绑定 上面 两个 class
expand:
mint-palette-button-active
.mint-palette-button-active{
-webkit-animation: mint-zoom 0.5s ease-in-out;
animation: mint-zoom 0.5s ease-in-out;
}
可以看到在 执行 动画的时候那个一瞬间 出现了 mint-palette-button-active class ,执行完毕之后出现或消失了expand class
5、通过监听animationend 事件 触发
onMainAnimationEnd
:
function
(
event
)
{
this
.
transforming
=
false
this
.
$emit(
'
expanded
')
},
那么接下来的事情就很简单了，就是看看怎样动态生成 expand 的 style 的
上代码
mounted
()
{
let
that
=
this
this
.
slotChildren
= []
for (
let
i
=
0
;
i
<
this
.
$slots
.
default
.
length
;
i
++)
{
if (
that
.
$slots
.
default[
i]
.
elm
.
nodeType
!==
3)
{
that
.
slotChildren
.
push(
that
.
$slots
.
default[
i])
// 获得 那些 插入的 按钮
}
}
let
css
=
''
// 把 180 * (3 + 1) / 4 ==> top ?? 这里用了不知道什么 神算法，弄着弄着竟然还真的变成了正确的角度了 。。。
let
direction_arc
=
Math
.
PI
* (
3
+
Math
.
max([
'
lt
'
,
'
t
'
,
'
rt
'
,
'
r
'
,
'
rb
'
,
'
b
'
,
'
lb
'
,
'
l
']
.
indexOf(
this
.
direction)
,
0))
/
4
for (
let
i
=
0
;
i
<
this
.
slotChildren
.
lenth
;
i
++)
{
let
arc
= (
Math
.
PI
-
that
.
offset
*
2)
/ (
that
.
slotChildren
.
length
-
1)
*
i
+
that
.
offset
+
direction_arc
let
x
= (
Math
.
cos(
arc)
*
that
.
radius)
.
toFixed(
2)
let
y
= (
Math
.
sin(
arc)
*
that
.
radius)
.
toFixed(
2)
let
item_css
=
'
.expand .palette-button-
'
+
that
.
_uid
+
'
-sub-
'
+
i
+
'
{transform:translate(
'
+
x
+
'
px
'
+
y
+
'
px) rotate(720deg);transition-delay:
'
+
0.03
*
i
+
'
s}
'
css
+=
item_css
that
.
slotChildren[
i]
.
elm
.
className
+= (
'
palette-button-
'
+
that
.
_uid
+
'
-sub-
'
+
i)
// _uid 每个 Vue 实例都会有一个递增的 id ，通过 this._uid 获取
}
this
.
styleNode
=
document
.
createElement(
'
style
')
this
.
styleNode
.
type
=
'
text/css
'
this
.
styleNode
.
rel
=
'
stylesheet
'
this
.
styleNode
.
title
=
'
palette button style
'
this
.
styleNode
.
appendChild(
document
.
createTextNode(
css))
document
.
getElementsByTagName(
'
head
')[
0]
.
appendChild(
this
.
styleNode)
}
这样就 通过一种 难以理解的方式 把角度给计算出来了(目前智商不够，表示不能理解 黑人问号脸.jpg)
希望 高手能代为解答一下
