html - ng-hide 无法正常工作

Question

我正在尝试在 angularjs 中使用 ng-hide 和 ng-show 编写解决方案。单击 ng-hide 时，它​​会延迟隐藏以显示 View 面板。请问哪里出了问题。这是我做的一个 plunker。

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

这是代码 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

这是因为你在上面添加了动画效果，它在隐藏 h2 标签时延迟了 2s transition。减少这种转变将提高其速度。为了在隐藏元素时摆脱延迟，你应该删除 css 的 transition 属性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