Angularjs 在ng隐藏、ng动画中向左滑动动画过渡_Angularjs_Css_Ng Animate

Angularjs 在ng隐藏、ng动画中向左滑动动画过渡

angularjs css

Angularjs 在ng隐藏、ng动画中向左滑动动画过渡,angularjs,css,ng-animate,Angularjs,Css,Ng Animate,我已经创建了JSFIDLE 单击“左”或“右”文本时，当前“隐藏”的动画向上，我们如何将其更改为“向左滑动”动画，例如“向左滑动并淡入”菜单栏 <body ng-app="myApp1"> <div id='outerdiv' ng-controller="MyCtrl" > <div ng-click="myValue=true" >LEFT</div> <div n

我已经创建了JSFIDLE 单击“左”或“右”文本时，当前“隐藏”的动画向上，我们如何将其更改为“向左滑动”动画，例如“向左滑动并淡入”菜单栏

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

角模

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

您可以在

上设置左：0
。设置动画隐藏

和

左：-100%

打开

。设置隐藏动画。ng隐藏

这是一张工作票

有一件事可以帮助你制作漂亮的动画，那就是使用

css是一组非常酷、有趣的跨浏览器动画，供您在项目中使用

退房。太棒了

太棒了！我花了几个小时来完成这项任务。解决了这个问题。非常感谢。

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