ハンバーガーアイコンアニメーション<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と使用すると、その効果が角度的に得られます。

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