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>
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.