材质设计从jQuery到AngularJS的涟漪
[英]Material design ripple from jQuery to AngularJS
问题描述
I have some simple code for a material design ripple effect in CSS that can be used on every element needed just by applying an .ripple class on it (but it must have width and height). 
我有一些简单的代码用于CSS中的材料设计波纹效果，只需在其上应用.ripple类即可将其用于所需的每个元素（但必须具有宽度和高度）。 The code is the following: 代码如下：
(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>
My question is: can you change the JavaScript function code to AngularJS in the order not to use jQuery anymore and have the same result? 我的问题是：可以将JavaScript函数代码更改为AngularJS，以便不再使用jQuery并得到相同的结果吗？ The purpose is to use it in a main project. 目的是在主项目中使用它。
Thank you in advance. 先感谢您。
1 个解决方案
解决方案1
4 已采纳 2015-05-01 14:36:11
You could write this code inside directive, basically that will do the DOM manipulation for you. 您可以在指令内部编写此代码，基本上可以为您执行DOM操作。 This directive will start work whenever it find it found class="ripple" 只要找到它，该指令就会开始工作class="ripple"
Directive 指示
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);
});
}
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.