如何实现在使用AnuglarJS动画效果翻转？ [英] How to implement a flip over effect using AnuglarJS animations?

问题描述

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

我想在点击上发生作用的翻转。每次点击时，就应该翻转到另一边。

在理想情况下，我想，我在寻找一个使用角的动画指令执行。

解决方案

PLNKR - 这里是一个种子配置的角度指令，提供3D翻转功能即可。我看不出有任何的好的原因，使用 ngAnimate 吧。

基本用法

 ＆LT;翻盖翻盖WIDTH =200像素倒装高度=100px的＆GT;
   ＆LT;翻转面板＆gt;
     内容前
   ＆LT; /翻转面板＆gt;
   ＆LT;翻转面板＆gt;
     内容回
   ＆LT; /翻转面板＆gt;
＆LT; /翻转＆GT;
 

注释

1. 追加自身的CSS的样式，是完全独立的。


2. 在一个适当的，通用的指令所有名称应该是可配置。


3. 翻转宽度和倒装高度为翻盖风格两者翻盖面板。


4. 指令做一些基本的检查，如果两个前和回设置。


5. 首页翻转面板是前，第二个是回。


6. 由于使用 transclusion 的翻转面板可以是任意的HTML内容。（你是对米莎无需包含）


7. 这仅在 -webkit 的作品。 （更新，以使其在Firefox的工作，只是复制与 -webkit 所有作品，没有preFIX - 你不需要 -moz ）

更新

PLNKR - 这里是一个更新和扩展版本。它显示了我的意思通过指令配置。在更多的细节：

1. 推出 flipConfig 通过提供商，允许设置在的app.config ：
   
   
   
   • 默认尺寸
   
   
   • CSS类名
   
   
   • 过渡的速度
   
   
   • 如果在翻转动作的被点击面板上的触发
   
   


2. 推出翻转显示属性，指定要秀哪一面。


3. 更改翻转显示我们可以触发指令之外的翻转动作的


4. 这在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

1. It appends css-styles on its own, to be fully independent.
2. In a proper, generic directive all names should be configurable.
3. flip-width and flip-height sets style of flip and both flip-panels.
4. Directive makes some basic check, if both front and back are set.
5. First flip-panel is front and the second is back.
6. Due to usage of transclusion content of the flip-panel may be arbitrary html. (you are right Misha no transclusion needed)
7. 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:

1. Introduced flipConfig via provider, that allows to set in app.config:
   • default dimensions
   • css class names
   • speed of the transition
   • if the flip action is triggered by a click on the panel
2. Introduced flip-show attribute that specifies which side to show.
3. Changing flip-show we can trigger the flip action from outside of the directive.
4. 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屋！