在NG-隐藏滑块向左动画过渡，NG-动画 [英] Slide Left animated transition in ng-hide, ng-Animate
问题描述
我创建的jsfiddle http://jsfiddle.net/99vtukjk/
在点击左边或右边的文本，目前隐藏动画是向上的，我们如何才能将其更改为左滑动动画幻灯片例如放大器和;淡出到左菜单栏？
＆LT;机身NG-应用=myApp1＆GT;
＆LT; DIV ID ='outerdiv'NG控制器=MyCtrl＆GT;
＆LT; DIV NG点击=myvalue的=真正的＆GT; LEFT＆LT; / DIV＆GT;
＆LT; DIV NG点击=myvalue的= FALSE＆GT;右LT; / DIV＆GT;
＆LT; DIV ID =一类='动画隐藏'NG隐藏=myvalue的＆GT;
这仅仅是一个样品的div
＆LT; / DIV＆GT;
{{myvalue的}}
＆LT; / DIV＆GT;
＆LT; /身体GT;
CSS：
.animate隐藏{
-webkit-过渡：所有立方贝塞尔（0.250，0.460，0.450，0.940）2秒;
-moz-过渡：所有立方贝塞尔（0.250，0.460，0.450，0.940）2秒;
-o过渡：所有立方贝塞尔（0.250，0.460，0.450，0.940）2秒;
过渡：所有立方贝塞尔（0.250，0.460，0.450，0.940）2秒;
行高：20像素;
不透明度：1;
填充：10px的;
边框：1px的纯黑色;
背景：白色;
}.animate-hide.ng隐藏{
行高：0;
不透明度：0;
填充：0 10px的;
}
角模块
VAR应用= angular.module（myApp1，[ngAnimate]）;
app.controller（MyCtrl功能（$范围）{
$ scope.myValue = FALSE;
}）;
您可以设置左：0 在 .animate隐藏
和左：-100％在 .animate-hide.ng隐藏
这里的工作小提琴
有一件事可以帮助你做出漂亮的动画是用
Animate.css
animate.css是一堆时髦，有趣和跨浏览器的动画让你在项目中使用的。
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 Module
var app = angular.module("myApp1", ["ngAnimate"]); app.controller("MyCtrl", function ($scope) { $scope.myValue=false; });
解决方案you can set
left: 0on.animate-hideand
left: -100%on.animate-hide.ng-hidehere's a working fiddle
One thing that can help you make beautiful animations is using Animate.css
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects.
这篇关于在NG-隐藏滑块向左动画过渡，NG-动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
