ボタンのクリックでアニメーション効果を適用します - JSF

Question

私は、JSFコンポーネントのためにこれらのアニメーションが見つかりました：http://www.animatejsf.org/

は私が

<h:form id="leftMenu"> 
Slide 
</h:form> 

<p:commandLink> 
    <p:outputLabel> click here 
     <aj:animate target="leftMenu" type="slideInLeft"/> 
    </p:outputLabel> 
</p:commandLink> 

を示すようなのcommandLinkクリックから<h:form>にこれを適用しようとしたが、アニメーションが表示されていませんクリックしてコマンドリンクをクリックします。代わりに、最初はWebページの読み込み時にアニメーション化されます。このアニメーションを<p:commandButton>または<p:commandLink>のいずれかをクリックして適用したかったのです。

どのように私はこれを達成することができます知っていますか？どんな助けもありがとうございます。

Answer 1

は、あなたがすでにやってみたが：ここ

<p:effect type="clip" event="click" /> 

例：

<h3 style="margin-top:0">Catalog</h3> 
<h:panelGrid columns="4" cellpadding="5"> 
    <p:panel id="blind" header="Blind"> 
     <h:outputText value="click" /> 
     <p:effect type="blind" event="click"> 
      <f:param name="direction" value="'horizontal'" /> 
     </p:effect> 
    </p:panel> 

    <p:panel id="clip" header="Clip"> 
     <h:outputText value="click" /> 
     <p:effect type="clip" event="click" /> 
    </p:panel> 

    <p:panel id="drop" header="Drop"> 
     <h:outputText value="click" /> 
     <p:effect type="drop" event="click" /> 
    </p:panel> 

    <p:panel id="explode" header="Explode"> 
     <h:outputText value="click" /> 
     <p:effect type="explode" event="click" /> 
    </p:panel> 

    <p:panel id="fold" header="Fold"> 
     <h:outputText value="doubleclick" /> 
     <p:effect type="fold" event="dblclick" /> 
    </p:panel> 

    <p:panel id="puff" header="Puff"> 
     <h:outputText value="doubleclick" /> 
     <p:effect type="puff" event="dblclick" /> 
    </p:panel> 

    <p:panel id="slide" header="Slide"> 
     <h:outputText value="doubleclick" /> 
     <p:effect type="slide" event="dblclick" /> 
    </p:panel> 

    <p:panel id="scale" header="Scale"> 
     <h:outputText value="doubleclick" /> 
     <p:effect type="scale" event="dblclick"> 
      <f:param name="percent" value="90" /> 
     </p:effect> 
    </p:panel> 

    <p:panel id="bounce" header="Bounce"> 
     <h:outputText value="click" /> 
     <p:effect type="bounce" event="click" /> 
    </p:panel> 

    <p:panel id="pulsate" header="Pulsate"> 
     <h:outputText value="click" /> 
     <p:effect type="pulsate" event="click" /> 
    </p:panel> 

    <p:panel id="shake" header="Shake"> 
     <h:outputText value="click" /> 
     <p:effect type="shake" event="click" /> 
    </p:panel> 

    <p:panel id="size" header="Size"> 
     <h:outputText value="click" /> 
     <p:effect type="size" event="click"> 
      <f:param name="to" value="{width: 200,height: 60}" /> 
     </p:effect> 
    </p:panel> 
</h:panelGrid> 

<h3>Target</h3> 
<p:commandButton type="button" value="Show" style="display:block" icon="ui-icon-image"> 
    <p:effect type="puff" event="click" for="img"> 
     <f:param name="mode" value="'show'" /> 
    </p:effect> 
</p:commandButton> 
<p:graphicImage id="img" name="demo/images/nature/nature1.jpg" style="display:none"/> 

<h:form> 
    <h3>On Load</h3> 
    <p:messages id="messages" closable="true"> 
     <p:effect type="pulsate" event="load" delay="500" /> 
    </p:messages> 

    <p:panel id="panel" header="Message Effects" toggleable="true"> 
     <h:panelGrid columns="2" cellpadding="5"> 
      <p:outputLabel for="text" value="Type:" /> 
      <p:inputText id="text" value="#{effectView.text}" required="true" /> 

      <h:outputText /> 
      <p:commandButton id="submit" value="Echo" actionListener="#{effectView.echo}" update="messages"/> 
     </h:panelGrid> 
    </p:panel> 
</h:form 

>

package org.primefaces.showcase.view.misc; 

import javax.faces.application.FacesMessage; 
import javax.faces.bean.ManagedBean; 
import javax.faces.context.FacesContext; 

@ManagedBean 
public class EffectView { 

    private String text; 

    public String getText() { 
     return text; 
    } 

    public void setText(String text) { 
     this.text = text; 
    } 

    public void echo() { 
     FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You said:'" + text + "'")); 
    } 
} 

http://www.primefaces.org/showcase/ui/misc/effect.xhtml

のcommandLinkと私のためにうまく働いています。