Я сделал собственное гамбургер-меню только с помощью 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, как в этом примере (первый слайдер): https: // jonsuh. ru / hamburgers /

Я нашел несколько хороших руководств в Интернете, но без flexbox я бы хотел использовать в своем решении. Надеюсь на помощь.

0
webta.st.ic 28 Июн 2017 в 14:20
Я не понимаю, у вас есть все, что вам нужно по этой ссылке, просто проанализируйте их код и используйте ту часть, которая вам нужна
 – 
Asons
28 Июн 2017 в 14:28
1
Использование Flexbox только ради этого не имеет смысла. Я не вижу причин, по которым вы могли бы использовать его для этого.
 – 
Turnip
28 Июн 2017 в 14:36

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>
3
viCky 28 Июн 2017 в 14:45