0

CSS FadeOut transition on zk div

asked 2015-05-11 08:15:35 +0800

JustinFrost gravatar image JustinFrost
139 1 6

Is there anyway to make a ZK div fade-out when setVisible(false) is called ?

delete flag offensive retag edit

4 Answers

Sort by ยป oldest newest most voted
1

answered 2015-05-11 08:49:03 +0800

echarish gravatar image echarish flag of Japan
1809 7
http://jp.linkedin.com/in...

updated 2015-05-11 09:18:07 +0800

Hello Justin

You can do it by using any javascript library like, JQuery etc. which is very easy to use. http://api.jquery.com/fadetoggle/

else, if you don't want to use Library than below is the CSS that you can use to do visible and invisble on your div by changing the setClass() method in your logic



.visible,
.hidden {
  overflow: hidden;
  /* This container should not have padding, borders, etc. */
}
.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
.visible > div,
.hidden > div {
  /* Put any padding, border, min-height, etc. here. */
}
.hidden > div {
  margin-top: -10000px;
  transition: margin-top 0s 2s;
}

hope it helps

Harish

link publish delete flag offensive edit
1

answered 2015-05-11 10:00:06 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2015-05-11 10:05:51 +0800

Have a sample code with jQuery here:

fade.zul:

<?xml version="1.0" encoding="UTF-8"?>

<!-- jQuery lib -->
<?script src="http://code.jquery.com/jquery-1.11.3.min.js"></script?>

<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:w="http://www.zkoss.org/2005/zk/client"
    xmlns:n="http://www.zkoss.org/2005/zk/native"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">


    <window hflex="1" height="100%" border="none">


        <button label="fade out" w:onClick="myFadeOut('myDiv')"></button>
        <space width="20px" />
        <button label="fade in" w:onClick="myFadeIn('myDiv')"></button>
        <n:hr></n:hr>

        <!-- Div for fading effect -->
        <div id="myDiv" style="height: 300px; width: 400px; background-color: yellow;">Fade out / Fade in</div>
        <script>
            <![CDATA[

/**
 * Calls jquery fadeOut() function on a zk widget by the ZK id.
 * We use the generated component uuid for let jquery find the
 * component.
 */
function myFadeOut(_comp){
       var comp = zk.Widget.$('$'+_comp);
       console.log(comp.uuid);
       jq('#'+comp.uuid).fadeOut(2000);
}

/**
 * Calls jquery fadeIn() function on a zk widget by the ZK id.
 * We use the generated component uuid for let jquery find the
 * component.
 */
function myFadeIn(_comp){
    var comp = zk.Widget.$('$'+_comp);
    console.log(comp.uuid);
    jq('#'+comp.uuid).fadeIn(2000);
}

            ]]>
             </script>

    </window>
</zk>

You can call the myFadeIn(); myFadeOut() function right from your controller/ViewModel too. Clients.evalJavaScript("myFadeOut( ' "+ divZkId + " ' )");

best Stephan

link publish delete flag offensive edit
0

answered 2015-05-13 08:01:43 +0800

JustinFrost gravatar image JustinFrost
139 1 6

Thanks for the answers guys. I know how to make a panel fade-in/out, the area I am having an issue with is doing it whilst still using the setVisible(boolean) method of zkdiv. I have bound a property of my view model to this and would like to use it.

The problem is that zk puts a display:none on the div and I can't seem to override this default behavior or wait for a css transition on opacity to finish before the style is applied.

link publish delete flag offensive edit
0

answered 2015-05-13 08:32:54 +0800

echarish gravatar image echarish flag of Japan
1809 7
http://jp.linkedin.com/in...

Isn't setVisible doing the same thing that fade-in/out will do, than why you want to do both the things, i understand you want a stylish way to hide or show your panel, so just use fade-in/out with css and you can achieve the same functionality that you do with setVisible.

you have a bounded property that controls the visibility, just use that property to set the proper class as per you logic and you can achieve same behavior with nice style. using both setvisible and fade-in/out together is just over-kill in my opinion.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2015-05-11 08:15:35 +0800

Seen: 28 times

Last updated: May 13 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More