如何实现在使用AngularJS动画效果翻转？

Question

什么是实现最好的方式在效果翻转使用AngularJS动画？

我想在上点击效应发生翻转.每次点击它,它应该翻转到另一侧.

理想情况下,我想,我在寻找一个使用角动画一条指令执行.

Answer 1

PLNKR - 这是可配置角度指令的种子,提供3d翻转功能.我看不出有什么好的理由来使用ngAnimate它.

基本用法

<flip flip-width="200px" flip-height="100px">
   <flip-panel>
     content-front
   </flip-panel>
   <flip-panel>
     content-back
   </flip-panel>
</flip>

评论

1. 它独立地附加了CSS样式,完全独立.
2. 在适当的,通用的directive所有名称应该是可配置的.
3. flip-width并flip-height设定风格flip和两者flip-panels.
4. 指令做一些基本的检查,如果同时front和back设置.
5. 首先flip-panel是front第二个是back.
6. 由于使用transclusion内容flip-panel可能是任意html. (你是对的Misha不需要翻译)
7. 它只适用于-webkit.(更新以使其在Firefox中工作,只需复制所有-webkit没有前缀的部分 - 您不需要-moz)

UPDATE

PLNKR - 这是一个更新和扩展的版本.它通过使指令可配置来显示我的意思.更多细节:

1. 引入flipConfigvia provider,允许设置app.config:
   • 默认尺寸
   • css类名
   • 过渡的速度
   • 如果通过单击面板触发翻转动作
2. 引入flip-show属性,指定要显示的一侧.
3. 改变flip-show我们可以从指令外部触发翻转动作.
4. 它适用于Firefox和IE11中的[几乎:-)].

(顺便说一下:它只是一个种子,它可以在很多方面得到改进.例如:指定轴,指定变换的原点,指定面板的半径和边距,允许翻转悬停,默认颜色,边距等等)

Answer 2

最近我在角度记忆游戏中使用了同样的用法.

我的实现与其他答案的想法相同.我还发布了翻译代码和DEMO.

Github:https://github.com/zwacky/angular-flippy

Ps:看起来我迟到了;)