Fading UniPanel In and Out depending on Visible Property

[Kattes]

Hi,
I have a little problem to get a UniPanel "fadeOut" when changing its property "visible" from true to false - the other direction (fadeIn) works fine.

Fade in is programmed as followed:

UniPanelStatus.ClientEvents.ExtEvents.Add('show=function show(sender, eOpts){'+
                                             'sender.el.setOpacity(0); '+
                                             'sender.el.fadeIn({duration: 500});'+
                                             '}'
                                           );

How has  a valid solution for "fadeOut" look like?

I tried the following without success:

UniPanelStatus.ClientEvents.ExtEvents.Add('hide=function hide(sender, eOpts){'+
                                             'sender.el.setOpacity(1); '+
                                             'sender.el.fadeOut({duration: 500});'+
                                             '}'
                                          );

 

[Sherzod]

Hi,

Have you seen this post too?

 

[Kattes]

Hi Sherzod,
Yes, I saw this older post and finally was inspired by it, but my goal is that whenever I change the "visible" property of any unigui control that this gets faded in or out (depending if visible is true or false).

[Sherzod]

If possible, make a simple testcase, we will check it.

[Kattes]

Hi Sherzod,
Please find attached a little testcase. 

Thank you and kind regards,
Carsten

UniGuiAnimattedPanel.zip

[Sherzod]

Hi Carsten, 

I will check. 

[Kattes]

But don not waste too much of your time on it. I also found a different solution which is suitable for me .

unit Main;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics,
  Controls, Forms, uniGUITypes, uniGUIAbstractClasses,
  uniGUIClasses, uniGUIRegClasses, uniGUIForm, uniPanel, uniGUIBaseClasses,
  uniButton, Vcl.Imaging.jpeg, uniImage, uniEdit, uniSpinEdit;

type
  TMainForm = class(TUniForm)
    UniButton1: TUniButton;
    UniPanel1: TUniPanel;
    UniImage1: TUniImage;
    UniEdit1: TUniEdit;
    UniEdit2: TUniEdit;
    UniSpinEdit1: TUniSpinEdit;
    procedure UniButton1Click(Sender: TObject);
  private
    { Private declarations }
    bToggle : boolean;
  public
    { Public declarations }
  end;

function MainForm: TMainForm;

implementation

{$R *.dfm}

uses
  uniGUIVars, MainModule, uniGUIApplication;

procedure FadeInOut(xControl: TUniControl; bFadeOut: boolean; const Duration : integer = 300);
begin
  if bFadeOut then
    xControl.JSInterface.JSCode(#1'.el.fadeOut({duration: '+IntToStr(Duration)+'});')
  else
    xControl.JSInterface.JSCode(#1'.el.fadeIn({duration: '+IntToStr(Duration)+'});')
end;

function MainForm: TMainForm;
begin
  Result := TMainForm(UniMainModule.GetFormInstance(TMainForm));
end;

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  bToggle :=  not bToggle;
  FadeInOut(UniPanel1, bToggle, UniSpinEdit1.Value);
  FadeInOut(UniImage1, bToggle, UniSpinEdit1.Value);
end;

initialization
  RegisterAppFormClass(TMainForm);
end.