Anwenden Animationseffekt auf den Knopf klicken - JSF

Question

fand ich diese Animationen für JSF-Komponenten: http://www.animatejsf.org/

Ich habe versucht, dies zu einem <h:form> von einem command Klick Anwendung als

gezeigt

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

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

Aber die Animation ist nicht sichtbar Klicken Sie auf den Befehlslink. Stattdessen animiert es das Laden der Webseite zunächst nur. Ich wollte diese Animation auf einen Klick entweder <p:commandButton> oder <p:commandLink> anwenden.

Weiß jemand, wie kann ich das erreichen? Jede Hilfe wird geschätzt.

Answer 1

Haben Sie schon versucht:

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

Hier ein Beispiel:

<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

, die mit einem command gut für mich gearbeitet hat.