NGリピートブレーキ？ いいえ-ngAnimateのみ+ CSSの移行

ngTagEditorタグ（指定されたページのデモ）を入力するための、 angularjsの優れたプラグインを見つけました。 彼は自分の大きさ-5 Kb（css + js）で私を好きでした-そして、これは、ちなみに縮小なしで。 彼は私が必要なものすべてを持っていて、不必要なものはファイルで仕上げることができました。



一般に、サイトのデモを見て、ダウンロードしてフレームワークバイクに追加しました。 テストを開始したところ、不快なバグが見つかりました。新しいカテゴリの入力フィールドで長押しすると、候補リストのカテゴリが複製され始めます。







最初に思いついたのは、曲がった「変更されたファイル」です。 その後、オリジナルの例をローカルで取得して実行しました-正常に機能しました。 その後、変更したコードを例としてコピーしましたが、それも正常に機能しました。



提案を含むデバッグ変数を導出しました。 変数のすべてが正常であることが明らかになりました。 つまり 問題は結論にあります。 次に、このプラグインが他の何かと交差し、以前に接続されたため、このような動作のために非難し始めました。 最も明らかなのは、CSSクラスが交差し、一部のイベントがこの動作につながるクラスの要素にかかっていることです。 クラスの切断を開始しました。 タグクラスが無効になるとすぐに、不快な効果はなくなります。

<span class="tag alert-info" ng-repeat="tag in suggestions" ng-mousedown="add(tag.id, tag.name)">{{tag.name}}</span>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

エラーの原因をすぐに見つけて、すぐにタグクラスの名前をframework-tagに変更したことを嬉しく思いました。 ページを更新し、エラーを受け取りました。 クラスを削除しました-エラーはなくなりました。 クラスを慎重に検討し始めました。

 .framework-editor .framework-tag{display:inline-block;height:24px;margin:0 7px 0 0;padding:0 5px;border-radius:2px;font-size:14px;line-height:24px;cursor:default;transition:box-shadow 100ms linear;}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、デバッグコンソールを見ると、ngAnimateに属するng-animate、ng-enterクラスが要素のちらつきに気づいたことを思い出しました。 ngAnimateに関する説明を読むと、css transitionプロパティが見つかりました。 また、「ngAnimate」+「error」を検索すると、あるアニメーションが機能するまで他のアニメーションが機能しなくなると不満を言うページがありました。 正直なところ、私はそのエラーの本質を本当に理解していませんでしたが、移行= 100ミリ秒は非常に憂慮すべきでした。 大量の100ミリ秒でキープレスイベント（より正確には、入力フィールドの変更）を受信すると、まさにそのような効果につながる可能性があります。 クラスの説明から削除：

 transition:box-shadow 100ms linear
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして- 万歳 - 不快な効果は消えました 。



誰かが理論と用語の点で私を修正できるなら、私はとてもうれしいです。 この場合の正しい（？）ソリューションを見つけることは、基本的な知識というよりは運に似ています。



誰かが別の優れたタグ編集コンポーネントを知っているなら、同様に書いてください。 タガー ngTagsInputを見つけました。 1つ目は非常にシンプルで、2つ目は優れていますが、サイズは40 Kbです。 また、コードがより多く含まれているという理由だけで、ファイルで終了するのはより困難です。



PSところで、テストではまだ小さなエラーが見つかりました。 作成者はcssファイルをcssとして接続し、その下ではjsとして接続します。 これは些細なことであり、将来、彼はそれを修正すると思います。