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

我是 angular 和 material

的新手

请帮忙。

Answer 1

我在 angular-material.

中找不到内置解决方案

但是，有一个 angular 解决方案。

如果您使用 klarsys's angular-material-icons(also see the GitHub page) with SVG-Morpheus，您可以通过 angular 的方式获得该效果。

如何使用

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

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

Hamburger icon animation using <md-icon> tag

angularjs

material-design

angular-material

如何使用