使用<md-icon>标签的汉堡包图标动画

Question

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

我看过google，发现汉堡包动画可以使用原生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标签。

我是角色和材料的新手

请帮忙。

Answer 1

我无法在角质材料中找到解决方案。

但是，这是一个有角度的解决方案。

如果您使用klarsys's angular-material-icons（同时参见GitHub page）SVG-Morpheus，则可以有角度地获得该效果。

如何使用

＆＃13;

＆＃13;

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

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是一个关于如何使用这些库的演示：

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