Div remains on the screen after animation

0
votes

I'm building an app for Android in HTML. I made the NavigationDrawer in HTML, and with javascript I make it to show on button click, and dissapear on <p> click. I'm using keyframes for the animations. When I press the button, the animation works (I am using -webkit-transform: translateX), and when I click the button again, the animation works but the div doesn't hide. It remains on the screen, but I can click through it (like pointer-events: none;). What's the problem?

CSS:

@-webkit-keyframes sMenuClose {
    from {
        -webkit-transform: translateX(0%);
    }
    to {
        -webkit-transform: translateX(-100%);
    }
}
@-webkit-keyframes sMenuOpen {
    from {
        -webkit-transform: translateX(-100%);
    }
    to {
        -webkit-transform: translateX(0%);
    }
}
.slidemenu {
    background: transparent;
    height: 100%;
    left: 0px;
    pointer-events: none;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 9991;
}

.slidemenu .menu {
    background: #FFF;
    border-right: 1px solid #000;
    color: #333;
    height: 100%;
    overflow: visible;
    pointer-events: visible;
    position: absolute;
    top: 0px;
    -webkit-transform: translateX(-100%);
    width: 80%;
}

.slidemenu .menu.hidden {
    -webkit-animation-name: sMenuClose;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
}

.slidemenu .menu.visible {
    -webkit-animation-name: sMenuOpen;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
}

HTML:

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <div class="slidemenu">
            <div class="menu">
                <p>Some text</p>
            </div>
        </div>
    </body>
</html>

JS:

window.onload = function() {

    document.querySelector("body div#actionbar div.action ul li.menu a").addEventListener("click", function(e) {
        e.preventDefault();
        if(document.querySelector("body div.slidemenu div.menu").classList.contains("hidden"))
        {
            document.querySelector("body div.slidemenu div.menu").classList.remove("hidden");
        }
        document.querySelector("body div.slidemenu div.menu").classList.add("visible");
    });

    document.querySelector("p").addEventListener("click", function(e) {
        e.preventDefault();
        document.querySelector("body div.slidemenu div.menu").classList.remove("visible");
        document.querySelector("body div.slidemenu div.menu").classList.add("hidden");
    });

};

Can you help me?

2
javascripthtmlcss

2 Answers

0
votes

I think you can get the effect you are after with a slightly simpler setup. This example is modified slightly to show a demo here but I think you should be able to convert this button back into your li menu item with ease. I made the slideout a light blue just so it is easier to see here as well.

function slideMenu_Toggle(){
    var _selector = "body div.slidemenu div.menu";
    document.querySelector(_selector).classList.toggle("visible");
}

window.onload = function() {
    var _selector = ".slidemenu .menu";
    document.querySelector(_selector).addEventListener("click", function(){
        if( this.classList.contains("visible") ) { slideMenu_Toggle(); }
    });

    document.querySelector("#toggle").addEventListener("click", slideMenu_Toggle);
};
.slidemenu {
  background: transparent;
  height: 100%;
  left: 0px;
  pointer-events: none;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9991;
}

.slidemenu .menu {
  border-right: 1px solid #000;
  color: #333;
  height: 100%;
  overflow: visible;
  position: absolute;
  top: 0px;
  width: 80%;
  pointer-events: visible;

  background: aliceblue;
  -webkit-transition: transform .5s ease;
  -webkit-transform: translateX(-100%);
}

.slidemenu .menu.visible {
  -webkit-transform: translateX(0%);
}
<div style="text-align: right; margin-top: 3em;">
  <button id="toggle" style="font-size: 2em;">toggle</button>
</div>

<div class="slidemenu">
  <div class="menu">
    <p>Some text</p>
  </div>
</div>
0
votes

Here is a workaround

<script language="JavaScript">

  var TheDivParentContents

  self.window.onload=getDivContents


  function getDivContents(){

    TheDivParentContents=document.getElementById("TheDivParent").innerHTML;

  }


  function OnClickHideDiv(){

    document.getElementById("TheDivParent").innerHTML="";

  }

  function OnClickShowDiv(){

    document.getElementById("TheDivParent").innerHTML=TheDivParentContents;

  }


</script>

<body bgcolor="white">

  <input script=JavaScript type=button onclick="OnClickShowDiv()" value="Show Div">

  <input script=JavaScript type=button onclick="OnClickHideDiv()" value="Hide Div">

  <span id=TheDivParent>

    <div>
      some text
    </div>

  </span>

</body>

Note that i place the div that i want to hide inside a Span tag. and that span tag will be used by the functions in the script to save the innerhtml of the div to a global variable.. Hope this works for you.