2014-10-08 9 views
8

Ich habe erstellt jsfiddle http://jsfiddle.net/99vtukjk/ Durch Klicken auf den linken oder rechten Text, ist derzeit die Animation für ausblenden nach oben, wie können wir es zu Folie links Animation ändern zB Folie & Fade zu linke Menüleiste ?.Slide Links animierten Übergang in ng-ausblenden, ng-Animate

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

Winkelmodul

var app = angular.module("myApp1", ["ngAnimate"]); 
    app.controller("MyCtrl", function ($scope) { 
    $scope.myValue=false; 
    }); 

Antwort

12

Sie left: 0 auf .animate-hide

und left: -100% auf .animate-hide.ng-hide

einstellen

hier ist ein fiddle

Eine Sache arbeiten, die Sie machen schöne Animationen helfen kann, ist Animate.css

animate.css ein paar kühlen, Spaß verwendet, und Cross-Browser-Animationen für Sie in verwenden, Ihre Projekte.