CSS 在 IONIC 中使用 ng-show 进行幻灯片转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24430083/
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 Transition with ng-show in IONIC
提问by Bindas
Here is the codepen http://codepen.io/lakhan/pen/cukyL
这是代码笔http://codepen.io/lakhan/pen/cukyL
I have a list of Items with ng-repeat and I am showing one item at a time. on clicking next showing the next item from the list. Now what I want to achieve is slide transition on Item when I am clicking on next. There is something I am missing from CSS side. any help will be appreciated.
我有一个带有 ng-repeat 的项目列表，我一次显示一个项目。单击下一步显示列表中的下一项。现在我想要实现的是当我单击下一步时在 Item 上进行幻灯片转换。我在 CSS 方面缺少一些东西。任何帮助将不胜感激。
回答by DanEEStar
Here is a codepen which kind of does what I think you want: http://codepen.io/anon/pen/ijLFq
这是一个代码笔，它可以做我认为你想要的：http://codepen.io/anon/pen/ijLFq
The ng-animate directive is not supported anymore in AngularJS >= 1.2. And for ng-showbased animations you have to use the ng-hide-add, ng-hide-removeCSS classes not the CSS classes described in the ngRepeatdocumentation. For a good explanation see: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngshow-and-ng-hide
AngularJS >= 1.2 不再支持 ng-animate 指令。对于ng-show基于动画的动画，您必须使用ng-hide-add, ng-hide-removeCSS 类，而不是ngRepeat文档中描述的 CSS 类。一个很好的解释见：http: //www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngshow-and-ng-hide
For the desired effect I had to use CSS3 animations. With CSS3 transitions I could not recreate the effect because sliding out to the left side and sliding in from the right side could not be modeled with tranisitons with the provided animation helper classes.
为了达到预期的效果，我不得不使用 CSS3 动画。使用 CSS3 过渡，我无法重新创建效果，因为无法使用提供的动画辅助类使用过渡来模拟从左侧滑出和从右侧滑入的效果。
Understanding CSS3 animations and transitions and the differences between are pretty hard to understand. The site CSS3 Transitions, Transforms, Animation, Filters and more!helped me a lot.
理解 CSS3 动画和过渡以及它们之间的差异是很难理解的。该站点CSS3 过渡、变换、动画、过滤器等等！帮了我很多。
回答by Peter Watts
The accepted answer was a little complicated for my use case and I couldn't get it working. I just wanted an element to slide up when it was shown, and back down when it was hidden. Here's what ended up working for me, in case it helps another lost soul:
接受的答案对我的用例来说有点复杂，我无法让它工作。我只是想让一个元素在显示时向上滑动，在隐藏时向后滑动。这是最终对我有用的东西，以防它帮助另一个迷失的灵魂：
.item-animate.ng-hide {
height:0;
opacity:0;
padding:0;
}
.item-animate.ng-hide-remove,
.item-animate.ng-hide-add {
display: block !important;
transition: all linear 300ms;
}
回答by littlequest
I just took a look in the ionic.app.css file for animate and found some pre-made classes. I tested a couple and the found the item-remove-animatedoes a great job animating ng-show/ng-hide. You can get fancy and write some transitions yourself too, but for me this does the job.
我只是在 ionic.app.css 文件中查看了 animate 并找到了一些预制类。我测试了几个，发现它们在item-remove-animate动画 ng-show/ng-hide 方面做得很好。你也可以自己花心思写一些过渡，但对我来说这可以。
Just add the item-remove-animateclass to the div you're trying to hide or show.
只需将item-remove-animate类添加到您要隐藏或显示的 div 中即可。
Here's the relevant code:
这是相关的代码：
<div class="view-mode item-remove-animate" ng-show="!editOn">
<div class="edit-mode item-remove-animate" ng-show="editOn">
This is the css that's already included in your project.
这是已包含在您的项目中的 css。
