Angular ng-show slowly hidden

Question

<div>
    <button type="submit" class="btnSubmit" ng-show="vm.isSearchIconVisible" after-hide="afterHide()" after-show="afterShow()">
       <i class="iconMglass"></i>
    </button>
    <button type="reset" my-show="!vm.isSearchIconVisible" after-hide="afterHide()" after-show="afterShow()" class="clearTextButton" ng-click="vm.clearSearchText()" >
       <span class="clearIcon">X</span>
   </button>

Hi,

I have two buttons that sits one on top of the other and I want to switch between them visually with a flag (isSearchIconVisible). Logicly it works fine, but there is 500ms that they are seen together and overlapping. I've used directive to catch the ng-show completed "event".

what is "my-show" in second button? – Ashish Rajput Feb 09 '17 at 05:58 — Ashish Rajput, Feb 09 '17 at 05:58
Can you provide code with fiddle? – Indhu Feb 09 '17 at 06:22 — Indhu, Feb 09 '17 at 06:22

score 2 · Accepted Answer · answered Feb 09 '17 at 07:02

Try adding those styles in your stylesheets.

.ng-hide.ng-hide-animate {
     display: none !important;
 }

.ng-animate.no-animate {
     transition: 0s none;
     -webkit-transition: 0s none;
     animation: 0s none;
     -webkit-animation: 0s none;
 }

Angular ng-show slowly hidden

1 Answers1