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

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标签来实现。

我是新的角度和材料

请帮助。

Answer 1

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

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

如果您使用klarsys's angular-material-icons（也请参阅GitHub page）和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