CSS 在 ng-hide、ng-Animate 中向左滑动动画过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26249373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slide Left animated transition in ng-hide, ng-Animate
提问by 001priyank
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?.
我已经创建了 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:
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 Module
角度模块
var app = angular.module("myApp1", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue=false;
});
回答by Nitsan Baleli
you can set left: 0on .animate-hide
您可以设置left: 0在.animate-hide
and left: -100%on .animate-hide.ng-hide
并left: -100%在.animate-hide.ng-hide
here's a working fiddle
这是一个工作小提琴
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.
animate.css 是一堆很酷、有趣且跨浏览器的动画，供您在项目中使用。
