Skip to main content
G
Giuseppe_Fiore15-Moonstone
15-Moonstone
April 13, 2018
Solved

Bug ThingWorx Studio 8.2.2 animate Popup

  • April 13, 2018
  • 3 replies
  • 4703 views

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

 

 

 

 

Best answer by RolandRaytchev

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);
}

3 replies

T
tmccombie21-Topaz I
21-Topaz I
April 16, 2018

Hi Giuseppe,

 

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

G
Giuseppe_Fiore15-MoonstoneAuthor
15-Moonstone
April 17, 2018

i used the PopUp widget .

😞

G
Giuseppe_Fiore15-MoonstoneAuthor
15-Moonstone
April 23, 2018

News for this Problem ? 😞

 

R
RolandRaytchev21-Topaz I
21-Topaz I
April 30, 2018

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?

 

 

G
Giuseppe_Fiore15-MoonstoneAuthor
15-Moonstone
May 2, 2018

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.

 

 

😞

 

R
RolandRaytchev21-Topaz IAnswer
21-Topaz I
May 4, 2018

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);
}
    G
    Giuseppe_Fiore15-MoonstoneAuthor
    15-Moonstone
    May 4, 2018

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

     

    Giuseppe

    Terms & ConditionsAccessibility statement