使用AngularJS动画实现
flip over effect的最佳方法是什么?
我想在点击时发生翻转效果.每次点击它,它应该翻转到另一侧.
理想情况下,我想,我正在寻找一个使用Angular动画的指令实现.
PLNKR – 这是可配置角度指令的种子,提供3d翻转功能.我没有看到为什么要使用ngAnimate的充分理由.
基本用法
<flip flip-width="200px" flip-height="100px"> <flip-panel> content-front </flip-panel> <flip-panel> content-back </flip-panel> </flip>
>它自己附加css样式,完全独立.
>在适当的通用指令中,所有名称都应该是可配置的.
>翻盖和翻盖高度设置翻盖和翻转面板的风格.
>如果设置正面和背面,指令会进行一些基本检查.
>第一个翻盖面板正面,第二个面板背面.
>由于翻盖面板的翻译内容的使用可能是任意的html. (你是对的Misha不需要翻译)
>它只适用于-webkit. (更新以使其在Firefox中工作,只需使用-webkit复制所有部分,不带前缀 – 您不需要-moz)
UPDATE
PLNKR – 这是更新和扩展版本.它通过使指令可配置来显示我的意思.更多细节:
>通过提供程序引入flipConfig,允许在app.config中设置:
>默认尺寸
> css类名
>过渡的速度
>如果通过单击面板触发翻转动作
>引入了flip-show属性,指定显示哪一侧.
>更改翻转节目我们可以从指令外部触发翻转动作.
>它适用于Firefox和IE11中的[几乎:-)].
(顺便说一下:它只是一个种子,它可以在很多方面得到改进.例如:指定轴,指定变换的原点,指定面板的半径和边距,允许翻转悬停,默认颜色,边距等等)