废话

==晚上失眠了,在网页上看到一个好玩的效果,自己模拟了一下,最开始用SVG写的。。。不多说了,简单记录一下思路和写法。

思路

先贴一下效果图,脑袋里面留下直观印象。录的效果可能不太好,大家可以用代码本地跑起来看真实的效果。

  1. 构造一个简单的组件元素,采用 ::after 伪元素来实现
  2. 利用 CSS 中 border 来实现,并且利用 CSS3 动画来添加切换的动画效果
  3. 主要利用 rotatescale 的效果来实现
  4. JS 部分对类名的 toggle

基本结构

    <checkbox-anim class="checkbox_anim js_anim_normal">
        <span class="checkbox checkbox-span"></span>
    </checkbox-anim>
    <checkbox-anim class="checkbox_anim js_anim_half">
        <span class="checkbox checkbox-span checkbox_half"></span>
    </checkbox-anim>

这里我的结构比较简单,checkbox-anim 组件属于 namespace 里面就是真正的组件肉体了。在真实使用的时候需要引入 input 组件,为了简单,这里就省略了,更清晰的看交互的实现。

漂亮的修饰

两个组件最基本的样式

    /********** checkbox 基本样式 *************/
    .checkbox {
        display: block;
        width: 50px;
        height: 50px;
        background: white;
        border: 1px solid #e9e9e9;
        border-radius: 3px;
        position: relative;

        transition: all .2s cubic-bezier(.68,-.55,.27,1.55);
    }
    
    .checkbox::after {
        display: block;
        content: '\20';
        width: 14px;
        height: 24px;
        border: 4px solid white;
        border-top: 0;
        border-left: 0;

        transform: rotate(45deg) scale(0);
        position: absolute;
        top: 14px;
        left: 16px;

        transition: all .2s cubic-bezier(.18,.89,.32,1.28) .1s;
    }
    
    /********** checkbox_half 基本样式 *************/
    .checkbox_half {
        background: #2db7f5;
        border: 1px solid #2db7f5;
    }
    
    .checkbox_half::after {
        width: 16px;
        height: 0;
        top: 23px;
        transform: scale(1);
    }

状态改变后的样式

    /* checkbox 激活样式 */
    .checked .checkbox {
        background: #2db7f5;
        border: 1px solid #2db7f5;
    }
    .checked .checkbox::after {
        top: 7px;
        transform: rotate(45deg) scale(1);
    }
    
    /********** checkbox_half 激活样式 *************/
    /* 没有修改背景色的部分哦~ */
    .checked .checkbox_half::after {
        width: 12px;
        height: 24px;
    }

其余附带的一点样式,非主要,修饰用的

    /* other 修饰类型样式 */
    .checkbox_anim {
        cursor: pointer;
        display: block;
    }

    .checkbox-span {
        margin: 20px;
    }

其实现在我们就算写完了,加入点 JS 就能够完整的动起来了。这里贴一下,可以拿来跑来看看效果 ^0^ 兼容神马的我不知道。。。不知道。。。

    (function(window, document, undefined) {
        if (window.HTMLElement) {
            HTMLElement.prototype.on = function(type, cb, isbb) {
                if (window.addEventListener) {
                    this.addEventListener(type, cb, isbb || false);
                }

                return this;
            };
            HTMLElement.prototype.toggleClass = function(cls) {
                if (this.classList) {
                    this.classList.toggle(cls);
                }

                return this;
            };
        }

        function select(selector) {
            return document.querySelector(selector);
        }

        var CheckBox = {
            checked: 'checked'
        };

        var CheckBoxNormal = {
            _self: select('.js_anim_normal'),
            init: function() {
                this.bind();
            },
            bind: function() {
                this._self.on('click', this.handleCheckbox.bind(this));
            },
            handleCheckbox: function(e) {
                this._self.toggleClass(CheckBox.checked);
            }
        };

        var CheckBoxHalf = {
            _self: select('.js_anim_half'),
            init: function() {
                this.bind();
            },
            bind: function() {
                this._self.on('click', this.handleCheckbox.bind(this));
            },
            handleCheckbox: function(e) {
                this._self.toggleClass(CheckBox.checked);
            }
        };

        [CheckBoxNormal, CheckBoxHalf].forEach(function(checkbox) {
               checkbox.init();
        });
    })(window, document);

标签: 前端

添加新评论