CSS animation on button click playing only once, not playing on second click on mobile browsers

Question

I have a dropdown menu appearing on button click. The problem is, the dropdown menus is appearing with animation all time without problem on PC, but plays with animation only once (on first click only) on mobile browsers.

            function myFunction() {
            var x = document.getElementById("dropdown");
             if (x.className.indexOf("w3-show") == -1) {
                x.classList.add("w3-show");
             } else { 
                x.classList.remove("w3-show");
             }
            }

         #dropdown { display:none; 
border-radius: .25em;
        box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,1);
        background-color: rgba(0,0,0,0.3);
        padding: 5px;
        font-size: 22px;
        color: white;
        position: relative;
        /* width:fit-content; */
        width: 250px;
        right: 0;
        left: -25px;
        margin: auto;}
        .w3-show {
            position: relative;
            display: block!important;
          }
          .w3-animate-zoom {
            animation:animatezoom 0.6s;
            -webkit-animation: animatezoom 0.6s;
          }
          @keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

    <button onclick="myFunction()" class="ikincibaslik" id="buttonme">Open dropdown menu</button>
                <div id="dropdown" class="show-on-scroll w3-animate-zoom" >
                        <a href="/imalat/indexfirst.php" class="w3-bar-item">First item</a>
                        <a href="/hizmet/indexsecond.php" class="w3-bar-item">Second item</a>
                </div>

Any ideas?

I don't see any animation on button click. x.className.indexOf("w3-show") is supposed to be x.classList.contains('w3-show') and it's throwing a InvalidCharacterError because you have extra spaces when when trying to add/remove the w3-show class. — Spectric
– Spectric, Commented Jul 8, 2021 at 18:07
@Spectric now I edited my post for a working "run code snippet". But the problem is it plays only once on mobile browsers. Is it an issue of the versions -o-transform -moz-transform etc? I tried that, too, but maybe missed something that I don't know — Anthon Santhez
– Anthon Santhez, Commented Jul 8, 2021 at 18:36

Nathaniel Flick · Accepted Answer · 2021-07-08 19:26:51Z

1

I've got it working by making the following changes:

indexOf is for arrays, you want to use the event listener and classlisttoggle instead: How do I use vanilla JavaScript to write a toggle function I wrote in JQuery?
I updated the variables (this is a style thing, not an error)
I updated the CSS class to account for the w3-show class being added to the dropdown id, and I added a display none for the dropdown id
I removed the onclick from the button and used the id instead (style thing) and removed the space for the added and removed w3-show class

Edit: Hat tip to this post: keyframe animation does not work on safari for iOS the idea is to call a separate keyframe for each browser prefix so I've added a webkit-specific one, and I realised the original animatezoom didn't have a close } bracket.

It works now:

var myButton = document.getElementById("buttonme");
var dropDown = document.getElementById("dropdown");

myButton.addEventListener("click", ()=>{
  dropDown.classList.toggle("w3-show");
});

         #dropdown { 
         display:none; 
border-radius: .25em;
        box-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,1);
        background-color: rgba(0,0,0,0.3);
        padding: 5px;
        font-size: 22px;
        color: white;
        position: relative;
        /* width:fit-content; */
        width: 250px;
        right: 0;
        left: -25px;
        margin: auto;}

#dropdown.w3-show {
        position: relative;
        display: block;
      }
      .w3-animate-zoom {
        animation:animatezoom 0.6s;
        -webkit-animation: animatezoom 0.6s;
      }
      
      @keyframes animatezoom{
      from{transform:scale(0)
      } 
      to
      {transform:scale(1)}
      }
      }
      
      @-webkit-keyframes animatezoom {
  from{transform:scale(0)
      } 
      to
      {transform:scale(1)}
      }
}

<button class="ikincibaslik" id="buttonme">Open dropdown menu</button>
                <div id="dropdown" class="show-on-scroll w3-animate-zoom" >
                        <a href="/imalat/indexfirst.php" class="w3-bar-item">First item</a>
                        <a href="/hizmet/indexsecond.php" class="w3-bar-item">Second item</a>
                </div>

edited Jul 8, 2021 at 19:26

answered Jul 8, 2021 at 18:24

Nathaniel Flick

2,9732 gold badges26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anthon Santhez Over a year ago

Yes I edited my post for the button "run code snippet" to work. But the problem is it doesn't play more than once on mobile browsers. You have any ideas for that?

Nathaniel Flick Over a year ago

Hi @AnthonSanthez try again, I made an important edit removing the indexof (for checking arrays) to event listener and classlist toggle.

Anthon Santhez Over a year ago

Hi @Nathaniel, I tried your code, it is much more simpler thanks for that, but again it is playing only once on mobile browser, as before the second click show dropdown menu without any animation:((

Collectives™ on Stack Overflow

CSS animation on button click playing only once, not playing on second click on mobile browsers

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related