cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Bug ThingWorx Studio 8.2.2 animate Popup

SOLVED
Highlighted
Moonstone

Bug ThingWorx Studio 8.2.2 animate Popup

In the latest version of ThingWorx Studio 8.2.2 the css for PopUp no longer works.

in the previous one I used the following CSS to animate the Popup window, after the update the show / Hide animation does not work anymore.

 

CSS Used

 

.twx-popup-container {
transition: -webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955),-webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
-webkit-transform: translateX(0) translateZ(0);
transform: translateY(0px) translateZ(0);
}
.twx-popup-container.hidden {
display: block !important;
-webkit-transform: translateX(250px) translateZ(0);
transform: translateY(-600px) translateZ(0);
}

 

 

Has something changed ?

:-(

Giuseppe

 

 

 

 

Tags (2)
1 ACCEPTED SOLUTION

Accepted Solutions

Re: Bug ThingWorx Studio 8.2.2 animate Popup

I asked development and he suggested to use instead the angular ng-hide.

So I tested your css now in the modified version and it does animate. I am not sure if this is the correct/ desired apperance. Could you test it,  please, and let me know!

Thanks

Here the modified version:  

.twx-popup-container {
transition: -webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955),-webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
-webkit-transform: translateX(0) translateZ(0);
transform: translateY(0px) translateZ(0);
}
.twx-popup-container.ng-hide {
display: block !important;
-webkit-transform: translateX(250px) translateZ(0);
transform: translateY(-600px) translateZ(0);
}
8 REPLIES 8

Re: Bug ThingWorx Studio 8.2.2 animate Popup

Hi Giuseppe,

 

Are you using the PopUp widget or $ionicPopup? Are you receiving any errors after upgrading? 

Re: Bug ThingWorx Studio 8.2.2 animate Popup

i used the PopUp widget .

:-(

Re: Bug ThingWorx Studio 8.2.2 animate Popup

News for this Problem ? :-(

 

Re: Bug ThingWorx Studio 8.2.2 animate Popup

Do you see any errors in the console when viewing the project in preview? 

Re: Bug ThingWorx Studio 8.2.2 animate Popup

Hi,

in generally it seems that popup widget is working with  style .

For example the following style:

.test1{
width: 40%;
border: 5px solid red;
-webkit-transition: width .35s ease-in-out;
transition: -webkit-transform .8s cubic-bezier(.455,.03,.515,.955);
}
.test1:hover{
width: 90%;
border: 8px solid yellow;
}

adding to Applicaiton and then set the popup class property will work as expected:

2018-04-30_18-51-05.png

So means  that the style definition is working fine for this style in this  case.

I tried to use the your style definition  in chrome as general style but it was not working.

When I tried to use your style it moves the element on the top but I did not see any otters effects. What should it do?

How did you generate the mention style and in which version  was it working?

 

 

Re: Bug ThingWorx Studio 8.2.2 animate Popup

The problem is that up to the previous version, that style I wrote, scrolled the
popup animating it ( ver. 8.2.1 Thingworx Studio) ,in the last versione ( 8.2.2)  the effect of the animation no longer exists,
but appears as if it were a simple hide / visible, without animation.

 

 

:-(

 

Re: Bug ThingWorx Studio 8.2.2 animate Popup

I asked development and he suggested to use instead the angular ng-hide.

So I tested your css now in the modified version and it does animate. I am not sure if this is the correct/ desired apperance. Could you test it,  please, and let me know!

Thanks

Here the modified version:  

.twx-popup-container {
transition: -webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955);
transition: transform .5s cubic-bezier(.455,.03,.515,.955),-webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
-webkit-transform: translateX(0) translateZ(0);
transform: translateY(0px) translateZ(0);
}
.twx-popup-container.ng-hide {
display: block !important;
-webkit-transform: translateX(250px) translateZ(0);
transform: translateY(-600px) translateZ(0);
}

Re: Bug ThingWorx Studio 8.2.2 animate Popup

using ng-hide and no longer hidden works great, thanks 1000

 

Giuseppe