以 Angular 方式为 SVG 设置动画

Question

我是 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 一个名为的类时，“已检查”将应用于<button>。在我的 CSS 中，我应用了假设将“加号”更改为“复选标记”的代码。目前，这仅适用于 Chrome 和 Safari，因为 SVG 具有假定为 HTML 属性而不是 css 属性的 x 和 y 坐标。 Chrome 和 Safari 可以解决这个问题，但 Firefox 没有。所以我的解决方法是更改​​ Javascript 中的特定属性。

下面是我目前在 plusButton 控制器中的代码。它成功地将“加号”设置为“复选标记”，但到目前为止，任何让它回到“加号”的尝试都没有奏效。我正在使用 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;
}

我试图包含所有相关信息，但如果需要澄清，请询问。

Answer 1

只需使用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 调用的函数中，您可以管理一个布尔变量以了解 svg 处于哪个状态。

例如：

var isChecked = false;

$scope.changeState = function(){
  if(isChecked){
    // checkmark changes to a plus 
    isChecked = false;
  } else {
    // plus changes to a checkmark
    isChecked = true;
  }
}