Transition effect in menu with angle

Question

Transition effect in menu with angle

Navigation

#1 by (1 votes)

1

I would like a transition effect in the menu when giving a ng show or ng hide (click the open button).

 <a class="sandwich panel" ng-class="{'open' : isOpen}" ng-click="isOpen=!isOpen; toggleCustom()">
        <div>
        </div>
    </a>
</nav>
    <div ng-hide="custom">
        <ul class="menu-mob">
             <li class="menu-option color-menu-selected" ng-click="isOpen=!isOpen; toggleCustom()"><a ui-sref="home">Home</a></li>
            <li class="menu-option color-menu" ng-click="isOpen=!isOpen; toggleCustom()"><a ui-sref="vandergama">Client</a></li>
            <li class="menu-option color-menu" ng-click="isOpen=!isOpen; toggleCustom()"><a ui-sref="portifolio">Portifólio</a></li>
            <li class="menu-option color-menu" ng-click="isOpen=!isOpen; toggleCustom()"><a ui-sref="contato">Contato</a></li>
        </ul>
    </div>

Angular:

app.controller("app", function($scope){
$scope.custom = true;
$scope.toggleCustom = function() {
        $scope.custom = $scope.custom === false ? true: false;
    };
});

My Css would not help much, but the idea is that when you open the menu, it has an effect like this - > HERE

javascript html angularjs css

asked by anonymous 08.03.2017 / 15:31

1 answer

I removed the atom toolbar, how do you put it back? Find data from one data frame from the data in another

score 1 · Accepted Answer

install the angular-animate.min library

complete the ng-leave-active class in css

example:

 .menu-option {
    -moz-transition:transform 0.8s;
    -webkit-transition:transform 0.8s;
    -ms-transition:transform 0.8s;
    -o-transition:transform 0.8s;
    transition:transform 0.8s;
}

.menu-option.ng-leave-active {
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -o-transform: scale(0.1);
  transform: scale(0.1);
}