Do more on the web, with a fast and secure browser!

Download Opera browser with:

  • built-in ad blocker
  • battery saver
  • free VPN
Download Opera

CSS transition chaining: timing issue in Opera

  • I am working on a slide show, where each old image slides off-screen to the right, followed by a new image sliding in from the left. I managed to get this working by chaining three transitions, through a webkitTransitionEnd handler: 1. slide image off-screen to the right, and replacing the image by the next; 2. jump image from the right to the left, off-screen; 3. slide image on-screen from the left.

    This works in Firefox, but in Opera and Chrome the new image slides in from the right. The essence of the technique, with text label instead of image: (see CodePen).

    <html>
    <head>
    <meta charset="utf-8" />
    <title>Testing</title>

    <style>

    p{
    margin: auto;
    width: 100%;
    }

    .center{
    transform: translate(50%,0);
    transition: transform linear 0.5s;

    }

    .left{
    transform: translate(0%,0);
    transition: transform step-end 1ms;
    }

    .right{
    transform: translate(110%,0);
    transition: transform linear 0.5s;
    }

    </style>

    </head>

    <body>

    <p class="center" id="label">count 0</p>
    <button type="button" onclick="next()">Next</button>

    <script>
    var counter=0;
    var label=document.getElementById('label');

    /* Start the state automaton */

    function next(){

      label.classList.remove('center');
      label.classList.add('right');
    

    }

    /* State automaton:
    from the right, jump to the left
    from the left, slide to the center */

    function slide(){

      if(label.classList.contains('right')){
         // slide out
         label.classList.remove('right');
         label.classList.add('left');
         // next counter
         counter++;
    

    // alert('here');
    label.innerHTML="count "+counter;
    } else
    if(label.classList.contains('left')){
    // slide in
    label.classList.remove('left');
    label.classList.add('center');
    } else {
    // stop automaton
    }

    }

    document.getElementById('label').addEventListener( 'webkitTransitionEnd', slide, false );

    </script>

    </body>
    </html>

    I suspect the jump to the left is optimised out in Opera and Chrome. Adding back the javascript alert, currently commented out, restores the intended slide from the left.

    Two questions: 1. What is going on here? Is it a bug in Opera/Chrome, or am I more or less lucky to get this chaining to work in Firefox? 2. Is there a better technique to implement this slideshow functionality?

  • Your problem is neither linux specific, nor opera specific. It seems to me like an issue all chromium-based browsers have, so you should ask elsewhere.