is-leaving does not wait for transition to end

[loup-brun]

Hi,

The element correctly transitions in, but there is no transition out. I am using your regular example (markup and js).

Here's the css I'm using

.a-fade {
  transition: .8s;
  opacity: 1;
}

html.is-animating .a-fade {
  opacity: 0;
}

/* no luck here either*/
html.is-leaving .a-fade {
  opacity: 0;
}

I'm using the most recent build of Swup (1.0.2 reads the package.json).

Thanks for checking this out!

[gmrchk]

Hey there,
everything works just fine for me. Maybe this could help?

[loup-brun]

Ahh I ran through the docs too quickly – the class attribute must begin with a-fade. It's not instantly intuitive since it is common to have multiple classes on an element and their order doesn't usually matter.

Anyway, thanks for the help!

[gmrchk]

You're not the first one to miss this. I will update the docs to make it more clear.
Cheers!

[AdventurouslySocial]

Either solution of utilizing "a-fade" as the only class or the first class of many assigned to an element does not solve the problem for me.

MY INSTALLATION INFO:
I have Swup installed and enabled on a fresh local machine installation of Wordpress. There are only one other plugin installed which is 'Code Snippets'. Outside of this one exception - wordpress is completely stock.

MY OBSERVABLE BEHAVIOR:
The css transition out and transition in works once upon initial fresh page load. The second time any link is clicked the css transition out plays half way through then abruptly begins the transition in of new content. On all following link clicks the currently displayed page immediately cuts away and the new content gracefully transitions in.

I've tried many solutions offered in various threads here and on other sites with no successfully working solution.

Any assistance is greatly appreciated.

[gmrchk]

Hi @AdventurouslySocial

This sounds like swup doesn't register any elements to wait for on some pages. Could you provide a live demo or your code?

Also, the default option of animation selector has been changed since this issue was created (be sure to use the latest version of swup).

[AdventurouslySocial]

This is the structure of the pages transitioning to one another. This is just the pseudo code where anything swup related appears.

head
    <script src='https://eventjoy.dream.press/wp-content/swup/dist/swup.js'/></script>
/head

body

    section data-id="5b0a5b7" class="elementor-element elementor-element-5b0a5b7 a-fade elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" id="swup" data-element_type="section"

        TEXT
        BR/
        NAV BUTTON TO NEXT SWUP PAGE WITH IDENTICAL STRUCTURE

    /section


script
--
  | function domReady(callback) {
  | document.readyState === "interactive" \|\| document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
  | };
  | domReady(function() {
  | const domain = window.location.origin
  |  
  | const swup = new Swup({
  | LINK_SELECTOR: `a[href*="${domain}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]`,
  | })
  |  
  |  
  |  
  |  
  | });
  |  
  | </script>
  
/BODY

[gmrchk]

As I mentioned, the default option of animation selector has been changed since this issue was created. I'm not sure what version of swup you're running, so please, update to the latest version.

Then use transition-fade class instead of a-fade class in your HTML and styles.

[AdventurouslySocial]

The version of Swup I am using is the most current one available. I first tried using transition-fade when I began because that is what is documented - the effect was that nothing happened. I only got it to work when I began using a-fade.

Here is a live-link to the problem that as it is occurring.
https://eventjoy.dream.press/aswup1/

• You'll notice the failure to transition out after one or two iterations.
• You'll notice the css styling disappearing for all but the initially loaded page (which I assume is remedied by the mergehead plugin.)