Transition effect in angular menu

Asked

Viewed 553 times

1

I ask for a transition effect in the menu when giving an ng show or ng Hide (click on 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 wouldn’t help much, but the idea is that when opening the menu, it has an effect like this -> HERE <-

javascript html css angularjs css-transitions

  • your plunker linked this empty and think your css helps yes ein.. rs

  • Just like @andrepaulo said, your CSS will help yes and it’s even better to create in CSS.

  • Vixe, sorry. Follow this link so https://docs.angularjs.org/aping/directive/ngShow, this is the first example. Dude, I told you about css because I’m only using it for a little effect on the button and to fill the menu tab. Ms n to use it for effect.

1 answer

1


install the angular library-Animate.min

ultize 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);
}

Browser other questions tagged javascript html css angularjs css-transitions

You are not signed in. Login or sign up in order to post.