Logic Machine Forum
Transition only for widget - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Transition only for widget (/showthread.php?tid=680)



Transition only for widget - cekca - 17.03.2017

Hi is possible to apply the transition only for some object like a widget...???


RE: Transition only for widget - Erwin van der Zwart - 17.03.2017

Hi,

Yes you can (:

Use this custom css:

Code:
@-webkit-keyframes Zoom-In /* Safari and Chrome */
{
0%   {opacity:0; -webkit-transform: scale(0);}
50%  {-webkit-transform: scale(1);}
100% {opacity: 1;}
}

#widget-11{
-webkit-animation: Zoom-In 2s !important; /* Safari and Chrome */  
-moz-animation: Zoom-In 1s !important; /* Firefox*/    
}

BR,

Erwin


RE: Transition only for widget - cekca - 17.03.2017

Thank you!!!


RE: Transition only for widget - DGrandes - 07.02.2019

Hi,

I used this custom css to modify the transition of all the widet but it only do when I open the widget. Is there any way to do it when opening and closing?

.layer-widget{
-webkit-animation: Zoom-In-Widget 2s !important; /* Safari and Chrome*/
-moz-animation: Zoom-In-Widget 1s !important; /* Firefox*/
}

I have tried adding this code in java:

$(document.body).on("vclick", function() {

  $("#widget-112").removeClass("hide");  
  $("#widget-112").removeClass("ZoomIn");
  $("#widget-112").addClass("ZoomOut");    

   }  
});

This code close Widget-112 also when i click on the widget. "document.body" is wrong. How can I do it for all open widgets and only when i click out of the widget?

Thanks


RE: Transition only for widget - DGrandes - 08.07.2019

(17.03.2017, 10:44)Erwin van der Zwart Wrote: Hi,

Yes you can (:

Use this custom css:

Code:
@-webkit-keyframes Zoom-In /* Safari and Chrome */
{
0%   {opacity:0; -webkit-transform: scale(0);}
50%  {-webkit-transform: scale(1);}
100% {opacity: 1;}
}

#widget-11{
-webkit-animation: Zoom-In 2s !important; /* Safari and Chrome */  
-moz-animation: Zoom-In 1s !important; /* Firefox*/    
}

BR,

Erwin

Hi,

Is there any way to do the same in both direction (Zoom-in and Zoom-out)?

Thanks