CODEWITHSUNDEEP
angularjsmaterial-designangular-material
Rahul Singh
Rahul Singh

Reputation: 917

Hamburger icon animation using <md-icon> tag

I am trying to implement hamburger animation. using md-icon tag.

I have looked on google and found hamburger animation is available with native 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>

is it possible to do it with md-icon tag.

i am new to angular and material

please help.

Upvotes: 4

Views: 3364

Answers (1)

Thatkookooguy
Thatkookooguy

Reputation: 7012

I couldn't find a build in solution inside angular-material.

But, there's an angular solution.

If you use klarsys's angular-material-icons(also see the GitHub page) with SVG-Morpheus, you can get that effect in an angular way.

How to use

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>

here's a demo on how to use those libraries:

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

Upvotes: 5

Related Questions