マテリアルのスクロールダウン時にmd-whiteframeの値を変更する方法角度

Question

マテリアルアングルを初めて使用し、1カ月前に使用し始めたばかりなので、これは簡単な質問かもしれません。とにかく、私は0の白いフレームに設定されたツールバーを持っています。私は私のMDの内容を下にスクロールすると、2または4またはそれ以外の数に白いフレームの値を変更したいので、それに影を与えます。私はまた、それをアニメーション化したい、シャドウを点滅させないようにしたい。その例はGoogle Fontsのウェブサイトになります。あなたが画像を見ると、ツールバーの下に線が表示されます。その下の画像は、スクロールすると影に変わることを示しています。 上記の概要。 上記の影。

私は自分のcss、js、htmlを調べるのに時間を費やそうとしていますが、実際には次の金曜日に予定されている学校プロジェクトに取り組んでいます。情報。

md-contentの下部に影を付けることができましたが、スクロールダウンしたときにcssセレクタをボックスシャドーで追加しただけでしたが、スクロールのmd-whiteframe値。

私は変数を使用しようとしました。同様md-whiteframe="{{ctrl.elevation}}" が続い

if(item.scrolltop > 0) { 
this.elevation = 0;} else { 
this.elevation = 4;} 

ようなことを言って、私は私のjsファイルでそのような何かを試してみましたが、それはただ混乱と​​なりました。これは本当に大きな問題ではありません。私はちょうど私のプロジェクトに素敵な触れ合いを与えようとしています。私は本当にどんな助けもありがとう。前もって感謝します。また、私はこれに似た質問を探して、私が欲しいものは見つけられませんでしたが、これに答える質問を見つけたら、教えてください。

Answer 1

md-whiteframeディレクティブのclassプロパティで動作するようにしてください。たとえば ：あなたのコントローラで

<md-whiteframe class="{{ctrl.elevationClass}}"> 
    <span>My content</span> 
</md-whiteframe> 

：

if(item.scrolltop > 0) { 
    this.elevationClass = 'md-whiteframe-1dp'; 
} else { 
    this.elevationClass = 'md-whiteframe-4dp'; 
} 

https://material.angularjs.org/latest/demo/whiteframe