1

When I exclude the "background-color" CSS property of the .box class, it break the w2ui slide animation. The first click works, but on the 2nd click, the contents of #box2 appear within #box1.

I'm trying to use w2ui's slide animation, and I've implemented it nearly identical to the example given here: https://w2ui.com/web/demos/#/utils/3. In fact, I even created a jsfiddle of the exact same code from w2ui.com, and the only change I made, was to comment out the css property "background-color:" on line 11: https://jsfiddle.net/pyefdagb/

.box {
    /* 
    When background-color is NOT specified, the slide breaks.. why? 
    background-color: #fafafa;
    */
    padding: 4px;
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid silver;
}

If the background color is omitted, for some reason, the slide animation seems to break after the 2nd click. 1st click - animation works 2nd click - animation works, but the float:left divs from the 2nd screen appear in the background on the 1st screen/div.

It's very strange. I also tried background-color:rgb(0,0,0,0) to include the background color but with opacity 0, and that also breaks the slide animations.

Does anyone have any ideas on how to work around this, or why this is even happening?

Veechimo Morin
  • 11
  • 1
  • 3
    because without the background colour, you can see the other box underneath it (all the boxes are stacked on top of each other) – Pete Sep 09 '22 at 13:54
  • I see. It's not an ideal implementation for the effect IMHO. But now that I know the reason (many thanks Pete, much appreciated), I might be able to work around it by making the 2nd box's opacity 0 when looking at the first box, and vice versa. – Veechimo Morin Sep 09 '22 at 14:07

0 Answers0