Faire glisser la transition animée vers la gauche dans ng-hide, ng-Animate
J'ai créé jsfiddle http://jsfiddle.net/99vtukjk/ En cliquant sur le texte à gauche ou à droite, actuellement l'animation pour masquer est vers le haut, comment pouvons-nous la changer pour faire glisser l'animation de gauche, par exemple glisser et fondre pour barre de menu gauche?.
<body ng-app="myApp1">
<div id='outerdiv' ng-controller="MyCtrl" >
<div ng-click="myValue=true" >LEFT</div>
<div ng-click="myValue=false">RIGHT</div>
<div id="one" class='animate-hide' ng-hide="myValue">
this is just a sample div
</div>
{{myValue}}
</div>
</body>
CSS:
.animate-hide {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}
.animate-hide.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
}
Module angulaire
var app = angular.module("myApp1", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue=false;
});
vous pouvez définir left: 0 sur .animate-hide
et left: -100% sur .animate-hide.ng-hide
voici un travail violon
Une chose qui peut vous aider à créer de belles animations est d'utiliser Animate.css
animate.css est un tas d'animations sympas, amusantes et multi-navigateurs à utiliser dans vos projets.