如何实现在使用AnuglarJS动画效果翻转? [英] How to implement a flip over effect using AnuglarJS animations?
问题描述
什么是实现翻转效果使用AngularJS动画的最佳方式?
我想在点击上发生作用的翻转。每次点击时,就应该翻转到另一边。
在理想情况下,我想,我在寻找一个使用角的动画指令执行。
PLNKR - 这里是一个种子配置的角度指令,提供3D翻转功能即可。我看不出有任何的好的原因,使用 ngAnimate
吧。
基本用法
<翻盖翻盖WIDTH =200像素倒装高度=100px的>
<翻转面板>
内容前
< /翻转面板>
<翻转面板>
内容回
< /翻转面板>
< /翻转>
注释
- 追加自身的CSS的样式,是完全独立的。
- 在一个适当的,通用的
指令
所有名称应该是可配置。 -
翻转宽度
和倒装高度
为翻盖风格
两者翻盖面板
。 - 指令做一些基本的检查,如果两个
前
和回
设置。 - 首页
翻转面板
是前
,第二个是回
。 -
由于使用transclusion
的翻转面板
可以是任意的HTML内容。德尔>(你是对米莎无需包含) - 这仅在
-webkit
的作品。 (更新,以使其在Firefox的工作,只是复制与-webkit
所有作品,没有preFIX - 你不需要-moz
)
更新
PLNKR - 这里是一个更新和扩展版本。它显示了我的意思通过指令配置。在更多的细节:
- 推出
flipConfig
通过提供商
,允许设置在的app.config
:- 默认尺寸
- CSS类名
- 过渡的速度
- 如果在翻转动作的被点击面板上的触发
- 推出
翻转显示
属性,指定要秀哪一面。 - 更改
翻转显示
我们可以触发指令之外的翻转动作的 - 这在Firefox和[:-)几乎在IE11。
的(顺便说一句:这只是一个种子并可能在很多方面得到改善例如:指定轴,面板的转换,指定半径和保证金的规定起源,允许在悬停翻转,默认颜色,边距等)的
What would be the best way to achieve a flip over effect using AngularJS animations?
I would like the flip over effect to occur on click. Every time it's clicked, it should flip over to the other side.
Ideally, I guess, I'm looking for a directive implementation that uses Angular animations.
PLNKR - here is a seed of a configurable angular directive that provides 3d flipping functionality. I do not see any good reason why to use ngAnimate
for it.
basic usage
<flip flip-width="200px" flip-height="100px">
<flip-panel>
content-front
</flip-panel>
<flip-panel>
content-back
</flip-panel>
</flip>
Comments
- It appends css-styles on its own, to be fully independent.
- In a proper, generic
directive
all names should be configurable. flip-width
andflip-height
sets style offlip
and bothflip-panels
.- Directive makes some basic check, if both
front
andback
are set. - First
flip-panel
isfront
and the second isback
. Due to usage of(you are right Misha no transclusion needed)transclusion
content of theflip-panel
may be arbitrary html.- It only works in
-webkit
. (update to make it work in Firefox, just duplicate all pieces with-webkit
with no prefix - you do not need-moz
)
UPDATE
PLNKR - here is an updated and extended version. It shows what I meant by making the directive configurable. In more details:
- Introduced
flipConfig
viaprovider
, that allows to set inapp.config
:- default dimensions
- css class names
- speed of the transition
- if the flip action is triggered by a click on the panel
- Introduced
flip-show
attribute that specifies which side to show. - Changing
flip-show
we can trigger the flip action from outside of the directive. - It works in Firefox and [almost:-)] in IE11.
(btw: it is just a seed and it may be improved in a lot of ways. E.g: specifying axis, specifying origin of the transform, specifying radius and margin of the panels, allowing flip on hover, defaults colors, margins and so on)
这篇关于如何实现在使用AnuglarJS动画效果翻转?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!