Materialze CSS Feature discovery

1

Why does my menu button jump a little bit once it was being clicked??

I used materilze.CSS to write this.

https://codepen.io/zhouxiang19910319/pen/JjdBJMZ?editors=1010

2

does it have something to do with tab-target-wrapper open ?

Here’s the default CSS: (related part)

.tap-target-wrapper {
  width: 800px;
  height: 800px;
  position: fixed;
  z-index: 1000;
  visibility: hidden;
  -webkit-transition: visibility 0s .3s;
  transition: visibility 0s .3s;
}

.tap-target-wrapper.open {
  visibility: visible;
  -webkit-transition: visibility 0s;
  transition: visibility 0s;
}

.tap-target-wrapper.open .tap-target {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: .95;
  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}

.tap-target-wrapper.open .tap-target-wave::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.tap-target-wrapper.open .tap-target-wave::after {
  visibility: visible;
  -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
          animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  -webkit-transition: opacity .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
  transition: opacity .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s 1s;
  transition: opacity .3s,
 transform .3s,
 visibility 0s 1s,
 -webkit-transform .3s;
}

.tap-target {
  position: absolute;
  font-size: 1rem;
  border-radius: 50%;
  background-color: #ee6e73;
  -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
3

solution:

        <div class="fixed-action-btn">
            <a id="menu" onclick="next(0)" class="waves-effect waves-light btn btn-floating"><i class="material-icons">menu</i></a>
        </div>