文章/答案/技术大牛

发布

社区首页 >问答首页 >在ng-hide，ng-Animate中向左滑动动画过渡

问在ng-hide，ng-Animate中向左滑动动画过渡
EN

Stack Overflow用户

提问于 2014-10-08 12:48:31

回答 2查看 75.2K关注 0票数 11

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

Angular模块

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

angularjs

css

ng-animate

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-10-08 15:01:02

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

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

下面是一个有效的fiddle

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

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

票数 15

Stack Overflow用户

发布于 2014-10-08 15:04:15

查看ngAnimate。太棒了。

DEMO

票数 13

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26249373

复制

相似问题

问在ng-hide，ng-Animate中向左滑动动画过渡
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在ng-hide，ng-Animate中向左滑动动画过渡EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在ng-hide，ng-Animate中向左滑动动画过渡
EN