我创建了jsfiddle
http://jsfiddle.net/99vtukjk/
在点击左或右文本时,当前隐藏的动画是向上的,我们如何将其更改为向左滑动动画,例如slide&淡化到左边的菜单栏？
在点击左或右文本时,当前隐藏的动画是向上的,我们如何将其更改为向左滑动动画,例如slide&淡化到左边的菜单栏？
<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.940) 2s;
-o-transition:all cubic-bezier(0.250,0.940) 2s;
transition:all cubic-bezier(0.250,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;
});
你可以在.animate-hide上设置left：0
并离开：-100％on .animate-hide.ng-hide
这是一个工作fiddle
有一件事可以帮助你制作漂亮的动画
Animate.css
animate.css is a bunch of cool,fun,and cross-browser animations for you to use in your projects.