Popup not animating when closing?

When I open the popup it animates if I use the settimout as below, since Im loading images and text from my database I guess it needs 300milliseconds to load properly.

But when I close it, is is animating when I test it on my computer but not when I close it on my iPhone 6s? Then it is just closing it and you can’t see the animation.

var dagensAnnonsPopup2 = app.popup.create({
  content: '<div class="popup popup-swipe-to-close popuppen">'+
   '<div class="popuppen-header headeroutside"><div class="popuppen-headline">Dagens Erbjudande</div><i class="f7-icons color-gray size-18 popup-close popuppen-close">close_round</i></div>'+
  		   '<div class="popuppen-inner">'+
 			'<div class="popuppen-header headerinside"><div class="popuppen-headline">Dagens Erbjudande</div><i class="f7-icons color-gray size-18 popup-close popuppen-close">close_round</i></div>'+
              '<div class="block popuppen-block">'+
				'<div class="instadiv2">'+
				
                  '<img src=https://xxx.se/admin/user_images/xxx/annonser/'+theimage2+' class="instaimage instashadow " />'+
				  '</div>'+
				   head +
				   tex +
				   adr +
                  thelink +
                '</div>'+
				'</div>'+
            '</div>',
 
  // Events
  on: {
    open: function (popup) {
      console.log('Popup open');
    },
    opened: function (popup) {
      console.log('Popup opened');
    },
	
  }
});
setTimeout(function() { 
dagensAnnonsPopup2.open();
},300);
	
}

So how can I slow down the closing some milliseconds? I guess that would solve the problem, since I think it is trying to animate the closing too fast?

Thanks!

https://framework7.io/docs/popup.html#css-variables
–f7-popup-transition-duration

Thanks shastox, I tested to set .popup.modal-in,.popup.modal-out{transition-duration:3s} to slow it down and it does slow the in animation down, but it still just closes it without any animation when closing it?

Perhaps I need to set a settimeout when it is closing as well? As I did when opening it. But how do I do that?

I don´t understand why it is working on the computer and not in the phone?

I tested to remove the image to see if it animated better. But no luck. It just closes it without any animation.

What can be the differense between the computer and the phone?

I checked on an iPhone X as well and its the same problem, and when tested on an Android it worked as it should. So it is something with the iPhone?

Any suggestions Vladimir? Thanks.

You can use the animation property on the ‘close’ event. Have a visit to the following link:
https://framework7.io/docs/dom7.html#animation

1 Like

Thanks Nathan but there is already an animation on the close event since it works on the computer and on android.
Just that it doesnt work for the iPhone.

So I guess its better to fix the close event animation that it already have?

That timeout you have doesn’t make any sense actually, why is it? Are you on latest v5? What is the iOS version? If you remove image from popup does it work correctly?

Thanks Vladimir. I started all over and now it works, I don´t know what the problem was, but now it works in V5 :slight_smile: