Angular Anfang Übergang von ng-show, mit $ Timeout und $ kompilieren

Ich habe einen Dienst, der $compile verwendet, um einige HTML an das DOM anzuhängen. Dieser HTML-Code enthält einen ng-show mit einem Übergang zum Anzeigen und Ausblenden, und er beginnt mit einer falschen Bedingung. Das Problem ist, wenn es an das DOM angehängt ist, zeigt es den Verbergen-Übergang an. Wie kann ich es vermeiden? Ich habe bemerkt, dass mein Controller diesen Dienst innerhalb einer $timeout aufruft, nur dann tritt der unerwünschte Übergang auf.

https://plnkr.co/edit/og0wrp6rZ65StXbufqLI?p=preview

angular 
 
    .module('app', ['ngAnimate']) 
 
    .directive('compileNgShowAnimation', ($timeout, $compile) => ({ 
 
    restrict: 'E', 
 
    link: (scope, element) => { 
 
     $timeout(() => { 
 
     angular 
 
      .element(element) 
 
      .append($compile(` 
 
      <div> 
 
       Show: 
 
       <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"> 
 
       <br /> 
 
       <div 
 
       class="check-element animate-show-hide" 
 
       ng-show="checked"> 
 
       I should show up only when the checkbox is checked. 
 
       </div> 
 
      </div> 
 
      `)(scope)) 
 
     }) 
 
    } 
 
    }))

.animate-show-hide.ng-hide { 
 
    /*transform: translate3d(0,-100%, 0);*/ 
 
    opacity: 0; 
 
} 
 

 
.animate-show-hide:not(.ng-hide) { 
 
    /*transform: translate3d(0,0, 0);*/ 
 
    opacity: 1; 
 
} 
 

 
.animate-show-hide.ng-hide-add, 
 
.animate-show-hide.ng-hide-remove { 
 
    transition: all linear 0.5s; 
 
} 
 

 
.check-element { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
/* 
 
Copyright 2017 Google Inc. All Rights Reserved. 
 
Use of this source code is governed by an MIT-style license that 
 
can be found in the LICENSE file at http://angular.io/license 
 
*/

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script> 
 
<body ng-app="app"> 
 

 
    <compile-ng-show-animation></compile-ng-show-animation> 
 
    
 
</body>

Quelle

2017-08-03 Ian Luca

Was möchten Sie erreichen? Wenn ich die Seite lade, sollte die Checkbox sichtbar sein oder nicht? Wenn Sie einfach scope.checked = true setzen; Es wird sichtbar sein und keine falsche Animation wird abgespielt. –

Sie eine Fahne um Klasse nach einigen Zeiten anwenden können, etwa wie folgt:

angular 
    .module('app', ['ngAnimate']) 
    .directive('compileNgShowAnimation', ($rootScope, $compile, $document, $timeout) => ({ 
    restrict: 'E', 
    link: (scope, element) => { 
     $timeout(() => { 
     scope.checked = false; 
     scope.animate = false; 

     angular 
      .element(element) 
      .append($compile(` 
      <div> 
       Show: 
       <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"> 
       <br /> 
       <div class="check-element {{animate ? 'animate-show-hide':''}}" ng-show="checked"> 
       I should show up only when the checkbox is checked. 
       </div> 
      </div> 
      `)(scope)) 
     }); 
     $timeout(() => { 

     scope.animate = true; 
     },10); 
    } 
    }))

Quelle

2017-08-03 14:42:21

Sehr clever, löste das Problem auf Seitenrender und nach Seitenrender. –

Eine Option, um sicherzustellen, dass Das Element wird standardmäßig ausgeblendet, indem die Klasse ng-hide zum div hinzugefügt wird:

Dann bekommen Sie nicht die kurze Sicht

https://plnkr.co/edit/Ik3BflLHwu3DXglOMOhX?p=preview

Quelle

2017-08-03 14:45:32

Das hat das Problem für mich nicht gelöst. Ich denke, wegen der Verwendung von 'ng-Mantel' css –

iam nicht sicher, was Sie meinen, löst dies das Problem, wenn Sie nicht wollen, dass Sie div beim Rendern der Seite angezeigt werden? nicht wahr? :-) –

In dem Beispiel, das ich zur Verfügung gestellt habe, ist es, wenn die Seite rendert, aber in meinem Dienst, füge ich das Element ein wenig nach dem Rendern der Seite an –

Angular Anfang Übergang von ng-show, mit $ Timeout und $ kompilieren

Antwort

Verwandte Themen