Question

我用css制作了自己的汉堡包菜单。我想用flexbox解决它。所以我的html / css部分已经完成，看起来像这样：

＆＃13;

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.animateHamburger = function() {
    // ANIMATION
    console.log("animate hamburger to cross and back to hamburger");
  }
});

＆＃13;

.cAnimatedExpander {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}

.cAnimatedExpander span {
  height: 2px;
  width: 20px;
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" class="cAnimatedExpander" ng-click="animateHamburger()">
  <span></span>
  <span></span>
  <span></span>
</div>

＆＃13;

所以现在我想在这个例子中有一个像css一样的动画（第一个Slider）：https://jonsuh.com/hamburgers/

我在互联网上找到了一些很好的教程，但没有flexbox我想在我的解决方案中使用。希望得到一些帮助。

Answer 1

这可以解决你的问题。

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.animateHamburger = function() {
    // ANIMATION
    console.log("animate hamburger to cross and back to hamburger");
    $scope.isActive = !$scope.isActive;
  }
  
});

.cAnimatedExpander {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}

.cAnimatedExpander span {
  height: 2px;
  width: 20px;
  background-color: blue;
  transition-duration: 1s;
}

.cross span.top {
    transform: translate(0px, -4px) rotate(45deg);
    transition-duration: 1s;
    transform-origin: left;
}

.cross span.middle {
  opacity: 0;
  transition-duration: 1s;
}

.cross span.bottom {
    transform: translate(0px, -4px) rotate(-45deg);
    transition-duration: 1s;
    transform-origin: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-class="{'cross': isActive}" class="cAnimatedExpander" ng-click="animateHamburger()">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>

CSS动画汉堡菜单到X.

1 个答案: