マイクロ手紙アプレットアニメーション：グラデーションの高さ、左勾配

　　マイクロ手紙アプレットアニメーションのテストで今日それがピットに来たときに、需要は親要素の子要素に従うことを、背面の外部からの高さの高さの変更をクリックし、このような滑りの子です。

 

　　サブ要素は、0を左に達成するために複雑ではありませんが、彼らはピットに遭遇したとき、親要素のボックスの高さを変更するには、非常に親要素のボックスの高さを変更する権利、および児童の不確実性の高い要素の右の子要素に従うことが必要とされているため、私たちは、子要素の高い学位を取得する必要があります。

　　間違った時の高さを変えることで、高さは変更されません。テスト中に発見

    VARボックス= wx.createAnimation（オプション）; //アニメーションを作成します
    VAR OBJ = wx.createSelectorQuery（）。
    obj.select（ 'ANR'）。boundingClientRect（関数（RECT）{//サブ要素の高さを取得します。
      box.height（rect.height）。ステップ（）; //親要素の高さを変更します
      console.log（1）。
    。}）のexec（）;
    console.log（2）。
    that.setData（{
      ボックス：box.export（）
    }）;

　　

　　図2は、最初に印刷されることが判明実行が無効である理由を理解非同期動作、であることが判明しました。この中

    obj.select（ 'ANR'）。boundingClientRect（関数（RECT）{//サブ要素の高さを取得します。
      VARボックス= wx.createAnimation（オプション）; //アニメーションを作成します
      box.height（rect.height）。ステップ（）; //親要素の高さを変更します
      that.setData（{
        ボックス：box.export（）
      }）;
    。}）のexec（）;

　　問題はないはずと思うが、ピットの別の高さに遭遇し、突然の親要素は、プリセット効果になり、何のアニメーショントランジション効果はありません。親要素自体の高さは、親要素に、この子は要素まで保持この問題が解決されたプリセットの高さを残しています。グラデーション効果が実現されています。

 　　ソース決意

wxml

<ビュークラス= "ボックス" アニメーション= "{{ボックス}}">
  <ビュークラス= "ANL">左</ビュー>
  <ビュークラス= "ANR" アニメーション= "{{ANR}}">権利</ビュー>
</ビュー>
<ボタンbindtap = WXを "追加"：もし= "{{ダウン}}">倉庫</ボタン>
<ボタンbindtap = "GOBACK" WX：他> GOBACK </ボタン>

　

wxss

/ *ページ/のuserinfo / index.wxss * /
。ボックス{
  位置：相対;
  高さ：200rpx。
  オーバーフロー：隠されました;
  テキスト整列：センター;
  色：白;
  フォントサイズ：120rpx。
}
.ANL {
  高さ：200rpx。
  背景色：赤。
}
.anr {
  背景色：緑;
  高さ：400rpx。
  幅：100％;
  位置：絶対;
  左：100％;
  トップ：0;
}
.add {
  背景色：黄色;
  高さ：100rpx。
}

　　

JS

//ページ/のuserinfo / index.js
ページ（{

  / **
   *初期データページ
   * /
  データ：{
    ボックス：{}、
    ANR：{}、
    ダウン：真
  }、
  追加：関数（）{
    this.setData（{
      ダウン：偽
    }）;
    この= VAR。
    {=オプションをしましょう
      期間：1000、//アニメーションの実行時間
      たtimingFunction：「使いやすさで」//アニメーション効果を実行します
    }。
    VAR ANR = wx.createAnimation（オプション）; //アニメーションを作成
    this.anr = ANR。
    anr.left（0）。ステップ（）;
    that.setData（{
      ANR：anr.export（）
    }）;
    VAR OBJ = wx.createSelectorQuery（）。
    obj.select（ 'ANR'）。boundingClientRect（関数（RECT）{//サブ要素の高さを取得します。
      VARボックス= wx.createAnimation（オプション）; //アニメーションを作成します
      that.box =ボックス。
      box.height（rect.height）。ステップ（）; //親要素の高さを変更します
      that.setData（{
        ボックス：box.export（）
      }）;
    。}）のexec（）;
  }、
  GOBACK：関数（）{
    this.setData（{
      ダウン：真
    }）;
    this.box.height（ '200rpx'）ステップ（）。
    this.setData（{
      ボックス：this.box.export（）
    }）;
    this.anr.left（ '750rpx'）ステップ（）。
    this.setData（{
      ANR：this.anr.export（）
    }）
  }
}）