在 ng-hide、ng-Animate 中向左滑动动画过渡答案

【问题标题】：Slide Left animated transition in ng-hide, ng-Animate在 ng-hide、ng-Animate 中向左滑动动画过渡
【发布时间】：2014-12-02 16:03:30
【问题描述】：

我已经创建了 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;
    });

【问题讨论】：

标签： angularjs css ng-animate

【解决方案1】：

查看ngAnimate。太棒了。

DEMO

【讨论】：

太棒了！我花了大约几个小时试图完成这个。解决了这个问题。谢谢！

【解决方案2】：

你可以在.animate-hide上设置left: 0

和left: -100% .animate-hide.ng-hide

这是一个有效的fiddle

可以帮助您制作精美动画的一件事是使用 Animate.css

animate.css 是一组很酷、有趣且跨浏览器的动画，供您在项目中使用。

【讨论】：