jsf - PrimeFaces 状态栏是静态的而不是动画的

Question

我一直在关注 PrimeFaces 上的示例 showcase

我想做的是显示一个设置值 (10%) 的静态条，但具有动画条的动画效果。我试图将它们结合起来以获得我需要的静态值，但我想要的效果仍然只是完全静态

<p:progressBar value="10" 
               labelTemplate="{value}%" 
               ajax="true" 
               styleClass="animated"> 
</p:progressBar> 

这是我的代码。如何在设定值上实现动画外观？

谢谢大家

Answer 1

有两种方法可以获取动画p:progressBar。一种是客户端 端动画，您可以在其中通过 JavaScript 处理它(非常适合简单且通常是预定义的动画)。另一种是基于ajax的，当前值在服务器端bean中计算并定期更新(它可以像展示示例一样工作，但它更适合展示复杂的进度异步操作)。无论哪种方式，任何动画行为都会排除静态 性质。

您显示的代码示例使用一些静态值声明进度条 - 但它不处理其动画。如果您需要在某个值上停止的动画，好的方法是从 JavaScript 处理它。代码应该与展示示例中的代码非常相似，但您需要篡改步长、间隔和动画结束条件的值。如果你想让你的进度条自动动画化，你可以将它与 HTML 事件结合起来。实现细节在很大程度上取决于您想要实现的具体行为。