web-dev-qa-db-ja.com

ng-hide、ng-Animateでの左アニメーショントランジションのスライド

Jsfiddleを作成しました http://jsfiddle.net/99vtukjk/ 左または右のテキストをクリックすると、現在、非表示のアニメーションは上向きになっています。左メニューバー？.

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

角度モジュール

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

left: 0に.animate-hideを設定できます

およびleft: -100%上の.animate-hide.ng-hide

ここに働く fiddle

美しいアニメーションを作成するのに役立つことの1つは、 Animate.css を使用することです

animate.cssは、プロジェクトで使用するクールで楽しいクロスブラウザアニメーションの束です。

15
Nitsan Baleli

ngAnimate を確認してください。すごい。

[〜＃〜] demo [〜＃〜]

12
Miraage