如何使用AngularJS动画实现翻转效果? [英] How to implement a flip over effect using AngularJS 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.

理想情况下，我想我正在寻找一种使用Angular动画的指令实现.

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>

评论

1. 它可以完全独立地附加css样式.
2. 在适当的通用directive中，所有名称都应可配置.
3. flip-width和flip-height设置flip以及两个flip-panels的样式.
4. 如果同时设置了front和back，则指令进行一些基本检查.
5. 第一个flip-panel是front，第二个是back.
6. 由于使用了flip-panel的transclusion内容，因此可能是任意html.(您是正确的Misha，不需要包含任何内容)
7. 它仅在-webkit中起作用. (更新使其可以在Firefox中运行，只需使用-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)

更新

PLNKR -这是更新和扩展的版本.它显示了使指令可配置的含义.详细信息:

UPDATE

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

1. 通过provider引入了flipConfig，可以在app.config中进行设置:
   • 默认尺寸
   • css类名称
   • 过渡速度
   • 如果翻转动作是通过单击面板触发的

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: 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)

这篇关于如何使用AngularJS动画实现翻转效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！