angularjs - 使用 标签的汉堡图标动画

Question

我正在尝试实现汉堡动画。使用 md-icon 标签。

我在谷歌上查看过，发现原生 html 可以使用汉堡动画。

<md-button class="menu" ng-click="openSideNavPanel()" aria-label="menu">
        <md-icon md-svg-src="image/ic_menu_white_36px.svg"></md-icon>
</md-button>

是否可以使用 md-icon 标签来完成。

我是 Angular 和 Material 的新手

请帮忙。

Answer 1

我在 angular-material 中找不到内置解决方案。

但是，有一个 Angular 解决方案。

如果您使用 klarsys's angular-material-icons (另见 GitHub page )和 SVG-Morpheus ，您可以以有 Angular 的方式获得这种效果。

如何使用

angular.module('MyApp', ['ngMdIcons'])
  .controller('DemoCtrl', function($scope) {
    $scope.icon = "menu";

    $scope.changeIcon = function() {
      $scope.icon = $scope.icon === 'arrow_back' ? 'menu' : 'arrow_back';
    }
  });

* {
  outline: none;
}
/* this is just to allow fill and size transition. */
/* this isn't needed for morphing icons from one to the other */
ng-md-icon {
  fill: black;
  -webkit-transition: fill 750ms ease-in-out;
  -moz-transition: fill 750ms ease-in-out;
  -o-transition: fill 750ms ease-in-out;
  transition: fill 750ms ease-in-out;
}
ng-md-icon > svg {
  -webkit-transition: width 750ms ease-in-out, height 750ms ease-in-out;
  -moz-transition: width 750ms ease-in-out, height 750ms ease-in-out;
  -o-transition: width 750ms ease-in-out, height 750ms ease-in-out;
  transition: width 750ms ease-in-out, height 750ms ease-in-out;
}

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.0/angular-material-icons.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js'></script>

<!-- ACTUAL CODE -->

<div ng-controller="DemoCtrl" layout="column" layout-margin="" ng-cloak="" class="icondemoSvgIconSets" ng-app="MyApp">

  <p>Morph ng-md-icon from one icon to the other:</p>

  <p>
    <ng-md-icon icon="{{ icon }}" size="36px" ng-click="changeIcon()"></ng-md-icon>
  </p>

</div>

这是有关如何使用这些库的演示:

http://codepen.io/neilkalman/pen/JKWNjv