我是 Angular 的新手。我的大部分 Javascript 经验包括使用 jQuery 导航 DOM 树。从花大约十个小时弄乱 Angular 和阅读 this文章。我了解到您真的不应该以同样的方式处理 Angular。我有一个模板...
<div
class="goalCard-content"
data-ng-click="goalCard.toggleGoal()">
<card-circle
class="u-fillRemaining"
krg-circle-title="goalCard.goal.name"
krg-circle-icon="goalCard.goal.icon">
</card-circle>
<div class="u-maxX u-pullRight">
<plus-button
data-krg-button-checked="goalCard.isAdded()">
</plus-button>
</div>
</div>
在这个模板中,如果您查看 <plus-button>
还有另一个模板,代码如下……
<button
class="button button--plusButton"
data-ng-click="plus.toggleState($event)"
data-ng-class="{'is-checked':plus.state}">
<svg viewBox="-7 9 24 24" xml:space="preserve">
<rect
x="4" y="16.5" width="2px" height="9px"
class="plusButton-topBar" />
<rect
x="0.5" y="20" width="9px" height="2px"
class="plusButton-bottomBar" />
</svg>
</button>
我想要完成的是,当用户单击“.goalCard-content”时,“.plusButton-topBar”和“.plusButton-bottomBar”的 html 属性从一种状态变为另一种状态。在 jQuery 中,这将通过类似...
$('.goalCard-content).click(function() {
topBar = $(this).find(".plusButton-topBar")
topBar.velocity{(
width: 10px,
... more code
)}
)}
当用户点击 .goalCard-content
一个名为“is-checked”的类应用于 <button>
.在我的 CSS 中,我应用了假设将“加号”更改为“复选标记”的代码。目前,这仅适用于 Chrome 和 Safari,因为 SVG 具有 x 和 y 坐标,它们被认为是 HTML 属性而不是 css 属性。 Chrome 和 Safari 解决了这个问题,但 Firefox 没有。所以我的解决方法是更改 Javascript 中的特定属性。
下面是我目前在 plusButton Controller 中的代码。它成功地将“加号”动画化为“复选标记”,但到目前为止,任何让它回到“加号”的尝试都没有奏效。我正在使用 Coffeescript 和 velocity.js。
angular.module('shop').directive 'plusButton', ->
templateUrl: 'shop/common/plus-button.html'
scope: {
state: '=krgButtonChecked'
}
bindToController: true
controllerAs: 'plus'
controller: ($document, $element) ->
@toggleState = (event) ->
console.log event.currentTarget
$document.find('.goalCard-content').click ->
topBar = $(this).find(".plusButton-topBar")
bottomBar = $(this).find(".plusButton-bottomBar")
$(topBar).velocity width: 2, height: 10.9, x: 5.7, y: 15 , "ease"
$(bottomBar).velocity width: 6.2, height: 2, x: -1.3, y: 21.8, "ease"
console.log 'hit'
return
CSS
.plusButton {
display: block;
height: 1.5rem;
width: 1.5rem;
}
.button--plusButton {
height: 1.5rem;
width: 1.5rem;
min-width: 0;
padding: 0;
border-radius: 100%;
border: 1px solid $gray-5;
background-color: $white;
transition: all $transition-timing ease;
svg {
height: 100%;
width: 100%;
}
&.is-checked {
background-color: $gray-10;
border-color: $gray-10;
.plusButton-topBar,
.plusButton-bottomBar {
fill: $white;
}
.plusButton-topBar {
x: 5.7px;
y: 15px;
// width: 2px;
// height: 10.9px;
transform: matrix(0.7167, 0.6974, -0.6974, 0.7167, 16.5362, 1.2912);
}
.plusButton-bottomBar {
x: -1.3px;
y: 21.8px;
// width: 6.2px;
// height: 2px;
transform: matrix(0.7678, 0.6407, -0.6407, 0.7678, 15.0324, 4.1146);
}
animation: plusButton-pulse $transition-timing ease-in-out;
}
}
.plusButton-topBar,
.plusButton-bottomBar {
fill: $gray-8;
transform: matrix(1, 0, 0, 1, 0, 0);
transition: all $transition-timing ease;
}
.plusButton-topBar {
x: 4px;
y: 16.5px;
}
.plusButton-bottomBar {
x: 0.5px;
y: 20px;
}
我试图包含所有相关信息,但如果需要澄清,请询问。
最佳答案
只需使用 ng-click
来定义单击按钮时要执行的操作。并在满足特定条件时使用ng-class
设置一个类。
https://docs.angularjs.org/api/ng/directive/ngClick
https://docs.angularjs.org/api/ng/directive/ngClass
https://docs.angularjs.org/guide/animations
另请看一下使用我刚才告诉您的内容的示例:http://plnkr.co/edit/?p=preview
在 ng-click 调用的函数中,您可以管理一个 bool 变量以了解 svg 处于哪种状态。
例如:
var isChecked = false;
$scope.changeState = function(){
if(isChecked){
// checkmark changes to a plus
isChecked = false;
} else {
// plus changes to a checkmark
isChecked = true;
}
}
关于jquery - 以 Angular 方式制作 SVG 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34208536/