最初に入力ボックスにフォーカスを追加するまで効果はありません。以下の写真を参照してください：
次に、それらのいずれかをクリックすると、フォーカスがアニメーションをトリガーします。アニメーションの結果を図2に示します。
中央にログインパスワードテキストを入力すると、自動的に上部に追加されます（アニメーションプロセスの画像をキャプチャしないことを許してください）。
私はそれをテストし、高度なブラウザのみがこの効果をサポートすることを発見しました（IEはIE10、IE11、およびEDGEのみをサポートしています）。
次に、コードを貼り付けます。原則は非常に単純です。これは、イベントを通じてクラス名の追加と削除をトリガーすることです。特定のアニメーションはCSS3によって実装されているため、低レベルのブラウザがサポートしていない理由です。
ネイティブJS実装の例：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{padding：0;マージン：0; } .demo {border：1px solid grey;幅：300px;高さ：200px;位置：相対;左：200px;トップ：200px; -Webkit-Transition：すべて0.3S線形。 -moz-transition：すべて0.3s線形。 -ms-transition：すべて0.3s線形。 -O-Transition：すべて0.3S線形。遷移：0.3Sすべて線形。 } .demo input {width：200px;高さ：100px;位置：絶対;左：50px;トップ：50px; -Webkit-Transition：すべて0.3S線形。 -moz-transition：すべて0.3s線形。 -ms-transition：すべて0.3s線形。 -O-Transition：すべて0.3S線形。遷移：0.3Sすべて線形。 } .demo label {position：absolute;トップ：100px;左：80px;フォントサイズ：14px; -Webkit-Transition：すべて0.3S線形。 -moz-transition：すべて0.3s線形。 -ms-transition：すべて0.3s線形。 -O-Transition：すべて0.3S線形。遷移：0.3Sすべて線形。 } .activedemo {border：1px＃fd715a solid; -webkit-transition：0.3sのすべてが容易です。 -moz-transition：0.3sのすべてが容易です。 -ms-transition：すべて0.3秒の容易さ。 -O-Transition：すべて0.3秒の容易さ。遷移：0.3秒の容易さ。 } .activeInput {border：1px＃fd715a solid; -webkit-transition：0.3sのすべてが容易です。 -moz-transition：0.3sのすべてが容易です。 -ms-transition：すべて0.3秒の容易さ。 -O-Transition：すべて0.3秒の容易さ。遷移：0.3秒の容易さ。 } .activelabel {font-size：10px;色：＃fd715a;背景：白。 -webkit-transform：translate（-20px、-58px）; -moz-transform：translate（-20px、-58px）; -ms-transform：翻訳（-20px、-58px）; -ms-transform：翻訳（-20px、-58px）; -o-transform：translate（-20px、-58px）;変換：翻訳（-20px、-58px）; -Webkit-Transition：すべて0.3S線形。 -moz-transition：すべて0.3s線形。 -ms-transition：すべて0.3線形。 -O-Transition：すべて0.3S線形。 -O-Transition：すべて0.3S線形。遷移：0.3Sすべて線形。 } </style> </head> <body> <div> <input type = "text" id "inputdemo"/> <label for = "inputdemo"> content </label> </div> </body> <script> var addevent = function（obj、event、callback）{if（obj.addeventlistener）{obj.addeventlistener（adadeventlistener（adadeventlistener） if（obj.attachevent）{obj.attachevent（ 'on'+event、callback）}}; var demo = document.queryselector（ "。デモ"）; var input = document.queryselector（ "＃inputdemo"）; var label = document.queryselector（ "。デモラベル"）; addEvent（input、 "focus"、function（）{demo.className+= "Activedemo"; this.className+= "ActiveInput"; label.className+= "activelabel";}）; addEvent（input、 'Blur'、function（）{this.classname = this.classname.replace（// s*activeinput/s*/、 ''）; label.classname = label.classname.replace（// s*activelabel/s*/、 ''）; label.classname = label.classname.replace（// s*activelabel/s*/、 ''）;以下は、Angularを使用して実装された単純な効果です。原則は非常に単純です。これは、アニメーションを実装するための命令でDOMを操作することです。
AngularJS実装の例：
<！doctype html> <html lang = "en" ng-app = "formanimation"> <head> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </<srcript src = "lib/angularimaise.js" type = "text/javascript"> </script> <style> *{padding：0;マージン：0; } .container {width：445px;高さ：370px;国境左：10pxソリッド＃D4D4D4;位置：相対;左：100px;トップ：100px; } .container input {position：absolute;トップ：100px;左：25px;高さ：40px;幅：385px; } .container span {width：80px;高さ：25px;フォントサイズ：10px;背景：RGB（237,97,83）;色：白;位置：絶対;左：300px;トップ：109px;ラインハイト：25px;テキストアリグイン：.container .labelstyle {position：absolute;左：45px;トップ：115px;フォントサイズ：14px;色：＃929292; Z-Index：999;フォント：「Helvetica Neue」、Helvetica、Arial、Sans-Serif; -webkit-transition：0.2sのすべてが容易です。 -moz-transition：すべて0.2秒の容易さ。 -ms-transition：0.2sのすべての容易さ。 -O-Transition：0.2sすべて容易さ。遷移：0.2秒の容易さ。 } .inputactive {border：2px solid rgb（237,97,90）; -webkit-transition：0.2sのすべてが容易です。 -moz-transition：すべて0.2秒の容易さ。 -ms-transition：0.2sのすべての容易さ。 -O-Transition：0.2sすべて容易さ。遷移：0.2秒の容易さ。 } .labelactive {position：absolute;左：45px;トップ：115px; Z-Index：999;背景：白。境界線：2px固体白。色：RGB（237,97,90）;フォントサイズ：10px; -webkit-transform：translate（-10px、-23px）; -moz-transform：translate（-10px、-23px）; -ms-transform：translate（-10px、-23px）; -o-transform：translate（-10px、-23px）;変換：翻訳（-10px、-23px）; -webkit-transition：0.2sのすべてが容易です。 -moz-transition：すべて0.2秒の容易さ。 -ms-transition：0.2sのすべての容易さ。 -O-Transition：0.2sすべて容易さ。遷移：0.2秒の容易さ。 } </style> </head> <body ng-controller = "formanimationcontroller"> <form action = "" form-animation> <label for = "inputdemo">コンテンツを入力してください</label> <入力タイプ= "Text" id = "inputdemo"/> <span> .controller（ 'formanimationcontroller'、function（）{}）.directive（ 'formanimation'、['$ animate'、function（$ animate）{return {restrict： 'ea'、link：function（scope、element、attr）{ement.find（ "input"）。 element.find（ "label"）。removeclass（ "labelstyle"）。addclass（ "labelactive"）}）; find（ "input"）。 }）}}}}}}]）</script> </html>要約します
上記の2つの方法は、実装方法のみを反映しています。特定の実装スタイルについては、レンダリングを参照してCSSスタイルを調整できます。この記事の内容が、AngularJとJSを学ぶために誰にとっても役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。 wulin.comへのご支援ありがとうございます。