使用<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的angular-material-icons(也可以参见GitHub页面)和SVG-Morpheus,您可以以有角度的方式获得该效果.

如何使用

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