mint-ui 中的 Palette Button

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)

希望 高手能代为解答一下