EasyUI Forum
April 25, 2024, 07:49:52 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [SOLVED] Flicker by using animation  (Read 11912 times)
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« on: April 23, 2016, 06:50:32 AM »

Hello
here is complete code where you can see small flicker at the end of dialog load.
Please reload page few times so you can see what i mean.
I used openDuration:800 so it can be better seen.
Additional, when you close dialog, you will see shadow after dialog is closed.
Thank you.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
 <script type="text/javascript" src="/scripts/jquery-min.js"></script>
<script type="text/javascript" src="/scripts/jquery.easyui.min.js"></script>
</head>
<body>
<div id="dlg_login" Title="Please login" class="easyui-dialog" style="width:514px;height:250px;padding:7px 7px" modal="true" data-options="
    openAnimation:'fade',
    shadow:true,
    openDuration:800,
    closeDuration:400,
    closeAnimation:'fade',
    onBeforeClose:function(){
    var mask = $(this).data('window').mask;
    if (mask){
      mask.fadeOut();}
    },
    onClose:function(){
      $(this).panel('destroy');
    },
    onBeforeOpen:function(){
    var mask = $(this).data('window').mask;
    if (mask){
      mask.fadeIn();}
    }
 ">
<form id="form_login" method="post" novalidate></form>
</div>
</body>
</html>
« Last Edit: May 06, 2016, 10:39:30 AM by Pierre » Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 on: April 24, 2016, 01:13:01 AM »

The code below works fine.
Code:
<div id="dlg_login" Title="Please login" class="easyui-window" style="width:514px;height:250px;padding:7px 7px" modal="true" data-options="
        openAnimation:'fade',
        shadow:true,
        openDuration:800,
        closeDuration:400,
        closeAnimation:'fade',
        onBeforeClose:function(){
            var mask = $(this).data('window').mask;
            if (mask){
                mask.fadeOut();
            }
            var shadow = $(this).data('window').shadow;
            if (shadow){
                shadow.fadeOut(200);
            }
        },
        onClose:function(){
            $(this).panel('destroy');
        },
        onBeforeOpen:function(){
            var mask = $(this).data('window').mask;
            if (mask){
                mask.fadeIn();
            }
            $(this).window('window').css('z-index', $.fn.window.defaults.zIndex++);
        }
        ">
    <form id="form_login" method="post" novalidate></form>
</div>
Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #2 on: April 24, 2016, 10:21:16 AM »

Hello Jarry
thank you so much, I modified you code a bit and it works perfect.
Thank you so much.
« Last Edit: April 24, 2016, 10:46:46 AM by Pierre » Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #3 on: May 05, 2016, 05:27:38 AM »

Hello Jarry
your code works perfect using 1 window but problem is by opening second window.
Please see here:
http://code.reloado.com/oeasyrik1/11/edit#html
You will see that second window take mask from previous window and it flicking.
Thank you for your help.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #4 on: May 06, 2016, 02:02:59 AM »

You set a different 'openDuration' value in your two dialogs. Please look at http://code.reloado.com/oeasyrik1/14/edit
Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #5 on: May 06, 2016, 02:23:28 AM »

I was used different 'openDuration' because I wanted that flicking was visible.
Here I created new example without openDuration:
http://code.reloado.com/oeasyrik1/15/edit#preview
Please click on Button to load second window.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #6 on: May 06, 2016, 08:50:43 AM »

Please refer to this updated example.
http://code.reloado.com/oeasyrik1/16/edit#preview
Logged
Pierre
Sr. Member
****
Posts: 439


View Profile Email
« Reply #7 on: May 06, 2016, 10:39:15 AM »

Yes. It works awesome. Thank you so much Jarry.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!