ライフサイクルとanimate.cssアニメーション内部のNode.js

1点のライフサイクル
<テンプレート>
<DIV ID = "lifeinfo">
<P>コンポーネントのライフサイクル</ P>
<ボタンをクリック= "changeData" @>変更データ</ボタン>
<P> {{MSG}} </ P>
</ div>
</テンプレート>
<SCRIPT>
エクスポート{デフォルト
名： "lifeinfo"
beforeCreateは（）{
フッキング機能が実行アセンブリ前に初期化//
はconsole.log（ "初期化前"）;
}
作成（）{
初期化が組み立て完了後//変性
（ "初期化後"）はconsole.log;
}、
データ（）{
リターン{
MSG： "改変前のデータ"
;}
}、
メソッド：{
changeData（）{
this.msg = "変更後のデータ";
}
}、
beforeMountは（）{
//前アセンブリマウントする
（ "負荷前"）はconsole.logを;
}、
{）（マウント
アセンブリ//完了マウント
;はconsole.log（ "完了マウント"）
}、
のBeforeUpdate（）{
組み立て前//の修飾に
はconsole.log（ "変更前"、this.msg）;
}、
更新します（）{
組み立て後修飾//の
にconsole.log（this.msg "修正後"）;
}、
beforeDestroy（）{
アンロードする前に成分//
はconsole.log（ "アンロードする前に、"）;
}、
破壊（）{
//成分搬出後
（ "除荷後"）はconsole.logを;
}
};
</ SCRIPT>
2.アニメーション
<テンプレート>
<DIV ID = "animateinfo">
<！ - <P> VUEアニメーション遷移</ P>
<ボタン@切り替え> "changeStatus"をクリックする= </ボタン> - >
<！-デフォルトフェードフェードで提供され
、私の遷移にname属性移行コンポーネント場合は
カスタムデフォルトのカスタム名に対応するが、代わりV-切り替え

-->
<!-- <transition name="slide-fade">

  <div class="block" v-if="ischange">动画</div>
</transition>-->

<!-- <transition name="transform-top-fade">
  <div class="nav" v-show="ischange">标题</div>
</transition>-->

<!-- 
    动画可以通过上面的方式来写   也可以通过  transition  组件提供的自定义过渡类名称的属性来写动画
    enter-class
    enter-active-class
    enter-to-class

    leave-class
    leave-active-class
    leave-to-class

    name属性写  custom-classes-transition  系统的动画类名称

-->
<!-- 下面的这个动画  和  讲的自定义类属性无关 -->
<div class="menu" @touchstart="startinfo" @touchmove="moveinfo" @touchend="endinfo">
  <ul class="navlist" key="1" :style="`transform:translate(${translateX}px);`">
    <li>喜剧</li>
    <li>科幻</li>
    <li>动画</li>
    <li>动漫</li>
    <li>记录</li>
    <li>魔幻</li>
    <li>爱情</li>
  </ul>
</div>
<!-- 
   写自定义类动画
-->
<transition
  name="custom-classes-transition"
  enter-active-class="animateenter"
  leave-active-class="animateleave"
  enter-class="animateinfoenter"
  leave-to-class="animateinfoleave"
>
  <div class="menulist" @click="isshow=!isshow" v-show="isshow">我是一个组件</div>
</transition>

<!-- 用animate  css 结合使用transition 
1.安装animate.css
2.mainjs 文件里面进行引入
3.直接在transition组件上使用
-->
<button @click="isblock=!isblock">animate</button>
<!-- :duration  属性是设置进入和离开的动画时间   写一个值 两个动画时间一直  也可以分开写 -->
<transition
  name="custom-classes-transition"
  enter-active-class="animated slideInRight"
  leave-active-class="animated fadeOutDown"
  :duration="{enter:100,leave:100}"
>
  <div v-if="isblock">使用animate.css</div>
</transition>
<!-- 
    transition 组件有对应的钩子函数  可以在钩子函数里面写代码
    v-on  监听

    使用  过渡结合动画
    velocity-animate@beta
    1.安装  cnpm install --save-dev velocity-animate@be
    2.直接在那个组件里面使用 在哪引入

-->
<transition
  @before-enter="beforeenter"
  @enter="enter"
  @after-enter="afterenter"
  @before-leave="beforeleave"
  @leave="leave"
  @after-leave="afterleave"
>
  <div v-if="isblock">使用animate.css</div>
</transition>

</ DIV>
</テンプレート>
<SCRIPT>
//組み込まアニメーションの
速度"ベロシティ・アニメーション"からのインポート、
エクスポート{デフォルト
名： "animateinfo"、
データ（）{
リターン{
ischange：trueに、
startxコマンド：ヌル、
ENDX：ヌル、
移動X：0、
SCW：0、
isshow：真、に
isBlock：trueに
;}
}、（
搭載）{
; this.scw = window.screen.availWidth
}、
{：方法
（EL）beforeenter {
アニメーションに入る前にセット// CSSスタイル
el.style.opacity = 0;
el.style.transformOrigin = "センター";
}、
入力（ELは、DONE）{
にconsole.log（ "アニメーション入力"）。
//完全なオプションのループセットループ遅延設定アニメーションの実装が完了した後にアニメーション遅延ディスプレイ＆視認性のコールバック関数の終了後に
//が時間のアニメーションのアニメーション期間緩和アニメーションコールバックの開始前に開始
速度（
ELを、
{不透明:. 1のfontSize： "30px"}、
{
DURATION：1000、
遅延：300、
開始：（）=> {
にconsole.log（ "アニメーションを開始する準備ができている"）;
}、
コンプリート：（）=> {
コンソール.logの（ "アニメーション実行完了"）;
}
}
）;
（DONE）; //続行
}
EL（afterenter）{
速度（
EL、
{不透明:. 1のfontSize： "25ピクセル"、色"＃1 C0C0C0" }、
{DURATION：500}
）;
はconsole.log "を入力した後アニメーション"（）;
}、
beforeleave（EL）{
にconsole.log（ "アニメーション「）を離れる前に、
}
（DONE EL）休暇{
速度（EL、{たfontSize： "40ピクセル"、不透明度:. 1}、{DURATION：1000}）;
速度（
EL、
{たfontSize：0、不透明度：0}、
{ディレイ：1000、DURATION ：1000}
）;
はconsole.log（ "アニメーション離れ"）;
}、
afterleave（EL）{
にconsole.log（） "アニメーション出た後";
}、
changestatus（）{
this.ischange = this.ischange ;!
}
StartInfo（E）{
//タッチ開始
e.touches = LET touchを、
this.startxタッチ= [0] .pageX;
}、
moveinfo（E）{
移動//タッチ
LETタッチ= e.touchesと、
this.endx =タッチ[0] .pageX;
方向//分析タッチスクリーン
this.translateX = 0;
IF（this.endx && this.startx）{
SX = this.endxてみましょう- this.startx。
IF（SX <0）{
this.translateX + = SX。
IF（Math.abs（this.translateX）> this.scw - 490）{
this.translateX = this.scw - 490。
}
}他{
this.translateX + = SX。
（this.scw> Math.abs（this.translateX） - 490）であれば{
this.translateX = - （this.scw - 490）。
}
}
}
}、
endinfo（E）{
this.endx = NULL;
this.startx = NULL;
}
}
}。
</ SCRIPT>
<スタイル>
/ .block {
幅：100pxに。
高さ：100pxに。
国境：1pxの固体＃000;
境界半径：50％。
テキスト整列：センター;
行の高さ：100pxに。
} /
/ *クラスアニメーション

状態始動遷移を定義するためにV-入力
状態v入る活性を有効にする遷移状態を定義する
状態の開始遷移から離れたV-休暇定義
V脱退活性の定義を有効に遷移状態のまま
遷移の左端を定義するためにV-放置の状態を
/
/。スライドフェードアクティブ入力し、
スライドフェード脱退アクティブ{
遷移：すべてのLS;
}
。スライドフェード入力し、
スライド・フェード・ツー・脱退{
変換：移動X（40ピクセル）回転Z（原稿180°）;
不透明度：0;
}
.nav {
位置：相対;
幅：100％;
高さ：30px;
左：0;
トップ：0;
ボーダー：1ピクセル固体＃1 C0C0C0;
}
.transformトップフェードインアクティブ入力{
遷移：すべて0.3秒EASE;
}
.transformトップフェード脱退アクティブ{
トランジション：すべて1やすさ・イン・アウト。
}
.transformトップフェード入力し、
.transformトップフェード脱退対{
左：50％。
トップ：-100px;
幅：100ピクセル;
不透明度：0;
} * /

/ カスタムコンポーネントクラスの属性遷移アニメーションに係る書き込み /
.menu {
幅：100％;
高さ：40ピクセル、
行の高さ：40ピクセル;
ボーダー：1ピクセル固体＃000;
ボックス、サイジング：ボーダーボックス;
オーバーフロー：隠されました;
}
{.navlist
幅：490px;
オーバーフロー：隠された;
遷移：リニアすべて0.1秒;
}
.navlist> {リチウム
リストスタイル：なし;
フロート：左;
幅：70ピクセル;
}

.menulist {
位置：相対。
高さ：100pxに。
幅：100％;
左：0;
国境：1pxの固体＃000;
}
.animateenter、
.animateleave {
遷移：全0.8S容易・イン・アウト。
}
.animateinfoenter、
.animateinfoleave {
不透明度：0。
幅：50％;
左：25％;
}
</スタイル>

ライフサイクルとanimate.cssアニメーション内部のNode.js

おすすめ