2016-06-16 5 views
0

こんにちは、私が持ってフォローコードにちらつく: 入力はNG-場合

.container2 { 
 
    width: 300px; 
 
    height: 50px; 
 
    color: white; 
 
    background-color: grey; 
 
} 
 
.myClass1 { 
 
    color: red; 
 
} 
 
.myClass2 { 
 
    color: blue; 
 
}
<!doctype html> 
 
<html ng-app="myApp" ng-controller="myController"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"> 
 
    </script> 
 

 
    <script> 
 
    angular.module("myApp", []).controller("myController", function($scope) { 
 

 
    }); 
 
    </script> 
 

 
</head> 
 

 
<body> 
 
    <div class="container1"> 
 
    <input ng-if="!isOpen" type="text" placeholder="Text..."> 
 
    <span ng-if="!isOpen">Text1</span> 
 
    <span ng-if="!isOpen">Text2</span> 
 
    <span ng-if="isOpen">Text, when container 2 is open</span> 
 
    <button class="myClass1" ng-click="isOpen = !isOpen" ng-class="{myClass2: isOpen}">Click here...</button> 
 

 
    </div> 
 

 
    <div class="container2" ng-show="isOpen">Container 2 is open now...</div> 
 

 
</body> 
 

 
</html>

は私が私の解決策と同じロジックを示し、私のコードスニペットに小さな例を建て。ここではスニペットでうまくいきます(コードは本当に同じです)が、実際のソリューションでは、ボタンをクリックすると「テキスト1」と「テキスト2」の液体が隠され、「テキスト2開いていますが、入力は少し待ってから隠されています。もう一度閉じると、すべての要素が液体を表示したり隠したりします。開くと入力が点滅して隠れます...画像にぼかしを入れて表示します:

  • 2つのアイコンは私のスパンです「テキスト1」および「テキスト2」
  • は、三角形は私のボタン

ステップ1: enter image description here

ステップ2:それは閉鎖さだと三つの要素が、そこに他の1ではありません。デフォルト:私はボタンをクリックし、それは3つの要素を非表示にする必要があります1つのテキストを表示、おそらく0.5秒の入力は、そこにとどまる点滅し、皮革よりdは - 0.5秒、それは次のようになります。

enter image description here

ステップ3:それは0.5秒間点滅した後、それが非表示になりますとよりこのようにその正しい:

enter image description here

私はこれが十分に明確であると思います。誰かにアイデアはありますか?感謝と歓声。

重要EDIT:それは私が入力周りdiv要素を入れて、DIVにNG-if式を与えた場合、それが正常に動作などの入力、選択、チェックボックスとしてすべてのフォーム要素を点滅..

+1

あなたは入力タグにCSS遷移がないのですか? – gaurav5430

+0

はい、これは以下の入力用のCSSです:input {height:30px;パディング - 左:5ピクセル; text-align:left;} - 乾杯 – MrBuggy

+0

あなたはフィドルまたはplunkrで問題を再現することができますか?またはいくつかの他の作業コード – gaurav5430

答えて

1

NG-場合にはbeacuse動作する可能性があり、実際にDOM要素を削除doesnot DOM要素が、NG-ショーを取り除くngの場合、それだけで隠しドーム要素のにもかかわらず、NG-ショーを使用してみてください

ちらつきが原因の理由にすることができることをそのDOM要素は削除されます

+0

こんにちは、ありがとうございました!私は前にng-showとng-hideを試しました。それもまたちらつきます...周りのdivでちらつきがなくなり、他の要素もちょうどフォーム要素でちらつきません。 – MrBuggy

+0

PS:あなたは正しいです削除のためにng-ifの場合はng-showを使用します。私はこれを変更しますが、コードはより良いですが、ちらつきがまだ残っています...悪い場合はdivをng-showに置きますので、ちらつきが止まります... – MrBuggy

+0

これは私のctrl-f5リロード後の問題感謝と乾杯。 – MrBuggy

関連する問題