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

问题描述

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

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 - 这是一个种子的可配置角度指令，提供3d翻转功能。我没有看到任何好原因为什么要使用 ngAnimate 。

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.

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

评论

Comments

1. 它独立附加CSS样式，以完全独立。


2. 在一个适当的通用指令可配置。


3. flip-width 和 code>翻页和两个翻转面板。


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


5. 第一翻页面是前，第二个是返回。


6. 由于使用转换内容的翻页面可能是任意html （你是正确的Misha没有需要反转）


7. 它只适用于 -webkit 。 （更新以使其在Firefox中正常工作，只需复制所有带有<-c c> c> -webkit 且不带前缀的项目 - 您不需要 -moz ）

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

a href =http://plnkr.co/edit/JHBnpGwonxqAm9VISRu3?p=preview =noreferrer> PLNKR - 这是一个更新和扩展的版本。它通过使指令可配置来显示我的意思。更多详情：

UPDATE

PLNKR - here is an updated and extended version. It shows what I meant by making the directive configurable. In more details:

1. 通过引入 flipConfig / code>：允许在中设置app.config ：
   
   
   
   
   • 默认尺寸
   
   
   • cb类别名称
   
   
   • 转换速度
   
   
   指定要显示的那一面。
   
   • 更改 flip-show
   
   

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

> （btw：它只是一个种子，它可以在许多方面改进例如：指定轴，指定变换的原点，指定面板的半径和边距，允许翻转悬停，默认颜色，边距等）

(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屋！