CSS動畫漢堡菜單到X

Question

我已經用CSS制作了自己的漢堡菜單。 我想用flexbox解決它。 所以我的html / css部分已經完成，看起來像這樣：

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

 .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; } 

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

所以現在我想制作一個具有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>