Hamburger Icon Animation mit <md-icon> Tag

Question

Ich versuche, Hamburger Animation zu implementieren. Verwenden von md-icon-Tag.

Ich habe auf Google geschaut und gefunden, dass Hamburger Animation mit nativem HTML verfügbar ist.

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

ist es möglich, es mit md-icon-Tag zu tun.

Ich bin neu zu Winkel- und Material

bitte helfen.

Answer 1

Ich konnte keine Einbaulösung im Winkelmaterial finden.

Aber es gibt eine eckige Lösung.

Wenn Sie klarsys's angular-material-icons (siehe auch GitHub page) mit SVG-Morpheus verwenden, können Sie diesen Effekt auf eine eckige Weise erhalten.

Wie

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>

hier eine Demo auf verwenden, wie diese Bibliotheken verwenden:

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