ng-hide无法正常运作

Question

I am trying to code a solution using ng-hide and and ng-show in angularjs. On clicking on the ng-hide, it delays before hiding to show the view panel. Please what could be wrong. Here is a plunker I have made.

http://plnkr.co/edit/IiSwQ1cijiypdwIXV6K7?p=preview

This is the code view:

<div ng-app="myApp">
  <h1>Ng-show & ng-hide</h1>
  <p class="description">Click on the "show"-link to see the content.</p>
  <a href="" ng-click="showme=true">Show</a>
  <button ng-click="showme=false">Hide</button> 

  <div class="wrapper">
    <p ng-hide="showme">It will appear here!</p>
    <h2 ng-show="showme">This is mah content, yo!</h2>
  </div>

</div>  

Answer 1

Its because you have added animation effect on that, which has 2s transition delayed while hiding h2 tag. Reducing that transition will improve its speed. For getting rid of delay while hiding element you should remove transition property of css CSS

h2 {
  color: #2980b9;
  margin-bottom: 9px;
  margin-top: 0;
  font-size: 20px;
  background-color: white;
  /*width: 100px;*/
  text-align: center;
  padding: 16px;
  z-index: 15;
  border-radius: 4px;
  /*transition: all 0.1s ease-out;*/ //<-- reduced it to 0.1 sec will
}

Plunkr Here