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

发布时间：2020-12-17 08:52:48 所属栏目：安全来源：网络整理

导读：使用AngularJS动画实现 flip over effect的最佳方法是什么？我想在点击时发生翻转效果.每次点击它,它应该翻转到另一侧. 理想情况下,我想,我正在寻找一个使用Angular动画的指令实现. PLNKR – 这是可配置角度指令的种子,提供3d翻转功能.我没有看到为什么要使

使用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中的[几乎:-)].

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!