Сопротивление дизайна материала от jQuery до AngularJS

У меня есть простой код для эффекта структуры материала в CSS, который можно использовать для каждого элемента, необходимого только путем применения к нему класса .ripple (но он должен иметь ширину и высоту). Код выглядит следующим образом:Сопротивление дизайна материала от jQuery до AngularJS

(function(window, $) { 
 
    $(function() { 
 
    $('.ripple').on('click', function(event) { 
 
     event.preventDefault(); 
 

 
     var $div = $('<div/>'), 
 
     btnOffset = $(this).offset(), 
 
     xPos = event.pageX - btnOffset.left, 
 
     yPos = event.pageY - btnOffset.top; 
 

 
     $div.addClass('ripple-effect'); 
 
     var $ripple = $(".ripple-effect"); 
 

 
     $ripple.css("height", $(this).height()); 
 
     $ripple.css("width", $(this).height()); 
 
     $div.css({ 
 
      top: yPos - ($ripple.height()/2), 
 
      left: xPos - ($ripple.width()/2), 
 
      background: $(this).data("ripple-color") 
 
     }) 
 
     .appendTo($(this)); 
 

 
     window.setTimeout(function() { 
 
     $div.remove(); 
 
     }, 2000); 
 
    }); 
 
    }); 
 
})(window, jQuery);

body { 
 
    text-align: center; 
 
} 
 
button { 
 
    position: relative; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    background: #89669b; 
 
    color: white; 
 
    padding: 18px 60px; 
 
    border-radius: 2px; 
 
    font-size: 22px; 
 
} 
 
.fab { 
 
    border-radius: 50%; 
 
    margin: 0; 
 
    padding: 20px; 
 
} 
 
.material { 
 
    position: relative; 
 
    color: white; 
 
    margin: 20px auto; 
 
    height: 400px; 
 
    width: 500px; 
 
    background: #f45673; 
 
} 
 
.ripple { 
 
    overflow: hidden; 
 
} 
 
.ripple-effect { 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: white; 
 
    animation: ripple-animation 2s; 
 
} 
 
@keyframes ripple-animation { 
 
    from { 
 
    transform: scale(1); 
 
    opacity: 0.4; 
 
    } 
 
    to { 
 
    transform: scale(100); 
 
    opacity: 0; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head itemscope itemtype="http://schema.org/WebSite"> 
 
    <meta charset="UTF-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>Material Design Ripple</title> 
 
</head> 
 

 
<body> 
 
    <h1>Material Design Buttons</h1> 
 
    <h3>Just add the class ripple to anything and use the "data-ripple-color" property to set the ripple color</h3> 
 

 
    <button class="ripple">Login</button> 
 
    <button class="ripple" data-ripple-color="#89669b" style="background:white; color:black;">Login</button> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</body> 
 

 
</html>

Мой вопрос: может изменить код функции JavaScript в AngularJS в порядке, не больше использовать JQuery и имеют один и тот же результат? Цель состоит в том, чтобы использовать его в основном проекте.

Заранее спасибо.

источник

2015-05-01 VannTile Ianito

Вы можете написать этот код внутри директивы, в основном это сделает манипуляции DOM для вас. Эта директива будет начать работу, когда он нашел его нашел class="ripple"

Директива

app.directive('ripple', function($timeout) { 
    return { 
     restrict: 'C', 
     link: function(scope, element, attrs) { 
      element.on('click', function(event) { 
       event.preventDefault(); 

       var $div = angular.element('<div></div>'), 
        btnOffset = $(this).offset(), 
        xPos = event.pageX - btnOffset.left, 
        yPos = event.pageY - btnOffset.top; 

       $div.addClass('ripple-effect'); 
       var $ripple = angular.element(".ripple-effect"); 

       $ripple.css("height", $(this).height()); 
       $ripple.css("width", $(this).height()); 
       $div.css({ 
         top: yPos - ($ripple.height()/2), 
         left: xPos - ($ripple.width()/2), 
         background: $(this).data("ripple-color") 
        }) 
        .appendTo($(this)); 

       $timeout(function() { 
        $div.remove(); 
       }, 2000); 
      }); 
     } 
    } 

});

источник

2015-05-01 14:36:11

На самом деле, это работает. У меня был плохой порядок в моем html. Если вы все еще хотите скрипку, это [http://jsfiddle.net/vanntile/n2fugxhm/](http://jsfiddle.net/vanntile/n2fugxhm/) –

@ Vann'TileIanito рада это узнать. Спасибо. :) –

Сопротивление дизайна материала от jQuery до AngularJS

ответ

Смежные вопросы