Vue.js 实现 Material Design 的点击 Button 效果

4,194 阅读1分钟
原文链接: segmentfault.com

Material Design 谷歌推出了全新的设计语言Material Design。谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。(网上copy的)

Materialize 前端框架


Vue.js 自定义指令

// directive
Vue.directive('effect', {
    bind: function() {
        var el = this.el
        el.classList.add('waves-effect')
        this.expression && el.classList.add('waves-' + this.expression)
        function convertStyle(obj) {
            var style = '';
            for (var a in obj) {
                if (obj.hasOwnProperty(a)) {
                    style += (a + ':' + obj[a] + ';');
                }
            }
            return style;
        }
        this.handler = function(e) {
            var ripple = document.createElement('div');
            ripple.classList.add('waves-ripple');
            el.appendChild(ripple);
            var styles = {
                'left': e.layerX + 'px',
                'top': e.layerY + 'px',
                'opacity': 1,
                'transform': 'scale(' + ((el.clientWidth / 100) * 10) + ')',
                'transition-duration': '750ms',
                'transition-timing-function': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'
            };
            ripple.setAttribute('style', convertStyle(styles));
            setTimeout(function() {
                ripple.setAttribute('style', convertStyle({
                    'opacity': 0,
                    'transform': styles.transform,
                    'left': styles.left,
                    'top': styles.top
                }));
                setTimeout(function() {
                    ripple && el.removeChild(ripple);
                }, 750);
                // 
            }, 450);
        }
        this.el.addEventListener('mousedown', this.handler, false)
    },
    unbind: function() {
        this.el.removeEventListener('mousedown', this.handler)
    }
})

Button effect - light

Button effect - red

Button effect - yellow

Button effect - orange

Button effect - purple

Button effect - green

Button effect - teal

效果传送门 jsfiddle.net/chexian/m02…