文章/答案/技术大牛

发布

问角1到角2指令纹波效应
EN

Stack Overflow用户

提问于 2016-09-19 00:17:21

回答 1查看 789关注 0票数 0

请有人指导如何将下面的角1指令移植到角2：

(function() {
  'use strict';

  angular.module('whimsicalRipple', [])
    .config(function() {
      var styleEl = document.createElement('style'),
        styleSheet,
        rippleCSS,
        rippleLightCSS,
        rippleKeyframes,
        rippleWebkitKeyframes;

      rippleCSS = [
        '-webkit-animation: ripple 800ms ease-out;',
        'animation: ripple 800ms ease-out;',
        'background-color: rgba(0, 0, 0, 0.16);',
        'border-radius: 100%;',
        'height: 10px;',
        'pointer-events: none;',
        'position: absolute;',
        'transform: scale(0);',
        'width: 10px;'
      ];

      rippleLightCSS = 'background-color: rgba(255, 255, 255, 0.32);';

      rippleKeyframes = [
        '@keyframes ripple {',
          'to {',
            'transform: scale(2);',
            'opacity: 0;',
          '}',
        '}'
      ];

      rippleWebkitKeyframes = [
        '@-webkit-keyframes ripple {',
          'to {',
            '-webkit-transform: scale(2);',
            'opacity: 0;',
          '}',
        '}'
      ];

      document.head.appendChild(styleEl);
      styleSheet = styleEl.sheet;
      styleSheet.insertRule('.ripple-effect {' + rippleCSS.join('') + '}', 0);
      styleSheet.insertRule('.ripple-light .ripple-effect {' + rippleLightCSS  + '}', 0);

      if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
        styleSheet.insertRule(rippleWebkitKeyframes.join(''), 0);
      }
      else if (CSSRule.KEYFRAMES_RULE) { // W3C
        styleSheet.insertRule(rippleKeyframes.join(''), 0);
      }
    })
    .directive('ripple', function() {
      return {
        restrict: 'C',
        link: function(scope, element, attrs) {
          element[0].style.position = 'relative';
          element[0].style.overflow = 'hidden';
          element[0].style.userSelect = 'none';

          element[0].style.msUserSelect = 'none';
          element[0].style.mozUserSelect = 'none';
          element[0].style.webkitUserSelect = 'none';


          function createRipple(evt) {
            var ripple = angular.element('<span class="ripple-effect animate">'),
              rect = element[0].getBoundingClientRect(),
              radius = Math.max(rect.height, rect.width),
              left = evt.pageX - rect.left - radius / 2 - document.body.scrollLeft,
              top = evt.pageY - rect.top - radius / 2 - document.body.scrollTop;

            ripple[0].style.width = ripple[0].style.height = radius + 'px';
            ripple[0].style.left = left + 'px';
            ripple[0].style.top = top + 'px';
            ripple.on('animationend webkitAnimationEnd', function() {
              angular.element(this).remove();
            });

            element.append(ripple);
          }

          element.on('click', createRipple);
        }
      };
    });
})();

来源：https://github.com/pioug/angular-whimsical-ripple/blob/master/whimsicalRipple.js

angular

angular2-template

angular2-directives

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-19 09:15:12

有几种方法可以做到这一点。其中之一是使用组件，因为它允许在组件装饰器的styles属性中设置样式。

这样，angular1的配置部分将完全移动到组件的styles属性：

@Component({
  selector: '.ripple',
  styles: [`
      :host {
        display: inline-block;
        position: relative;
        overflow: hidden;
        -webkit-user-select: none; 
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
      }


      @-webkit-keyframes ripple {
          to {
            -webkit-transform: scale(2);
            opacity: 0;
          }
      }

      @keyframes ripple {
          to {
            transform: scale(2);
            opacity: 0;
          }
      }

      :host /deep/ .ripple-effect {
        -webkit-animation: ripple 800ms ease-out;
        animation: ripple 800ms ease-out;
        background-color: rgba(0, 0, 0, 0.16);
        border-radius: 100%;
        height: 10px;
        pointer-events: none;
        position: absolute;
        transform: scale(0);
        width: 10px;
      }

      :host /deep/ .ripple-light .ripple-effect {
        background-color: rgba(255, 255, 255, 0.32);
      }  
  `],
  template: '<ng-content></ng-content>',
})
export class RippleComponent {
  ...
}

另请参阅

第二步是处理单击事件。为此，在HostListener中有angular2装饰器。没有等效的angular.element，所以我只使用DOM (document.createElement，element.addEventListener)：

export class RippleComponent {
  @HostListener('click', ['$event', '$event.currentTarget'])
  click(event, element) {
    var ripple = document.createElement('span'),
      rect = element.getBoundingClientRect(),
      radius = Math.max(rect.height, rect.width),
      left = event.pageX - rect.left - radius / 2 - document.body.scrollLeft,
      top = event.pageY - rect.top - radius / 2 - document.body.scrollTop;

    ripple.className = 'ripple-effect animate';
    ripple.style.width = ripple.style.height = radius + 'px';
    ripple.style.left = left + 'px';
    ripple.style.top = top + 'px';
    ripple.addEventListener('animationend', () => {
      element.removeChild(ripple);
    });

    element.appendChild(ripple);
  }
}

柱塞实例

带图像的柱塞实例

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39563823

复制

相似问题

问角1到角2指令纹波效应
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角1到角2指令纹波效应EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角1到角2指令纹波效应
EN