在ng-hide，ng-Animate中滑动左动画过渡 [英] Slide Left animated transition in ng-hide, ng-Animate
本文介绍了在ng-hide，ng-Animate中滑动左动画过渡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了jsfiddle http://jsfiddle.net/99vtukjk/
点击左边或右文本，当前的动画为隐藏向上，我们如何改变它滑动左动画，例如幻灯片&褪色到左侧菜单。
I have created jsfiddle http://jsfiddle.net/99vtukjk/ On clicking left or right text, currently the animation for hide is upwards, how can we change it to slide left animation e.g slide & fade to left menubar?.
<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;
});
推荐答案
和左： -100％ .animate-hide.ng-hide
有一件事可以帮助你做出漂亮动画使用
Animate.css
One thing that can help you make beautiful animations is using Animate.css
animate.css是一系列酷炫，有趣和跨浏览器的动画，供您在项目中使用。
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects.
这篇关于在ng-hide，ng-Animate中滑动左动画过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
