ng-hide не работает должным образом

Question

Я пытаюсь закодировать решение, используя ng-hide и ng-show в angularjs. При нажатии на ng-hide он задерживается перед скрытием, чтобы отобразить панель просмотра. Пожалуйста, что может быть неправильно. Вот плункер, который я сделал.

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

Это мнение код:

<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

Его, потому что вы добавили эффект анимации на то, что имеет 2s transition замедленное, скрывая h2 тег. Сокращение этого перехода улучшит его скорость. Чтобы избавиться от задержки, скрывая элемент, вы должны удалить transition свойство из 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