Vueアニメーションの複数の要素のネストによる遷移の使用

前言

私たちのフロントエンドの仕事の中で私たちはページを書いて、いつもこのような効果がユーザーに何も体験していないような気がします.

新しい意味を作りたいのか?

アニメーションを少し我慢して、それではアニメーションをして私はまた彼が転がってまた彼がオフセットしてまたグラデーションの効果があると思っています

グラデーションと移動は一緒に書くことができますが、スクロールとオフセットは一緒に実行できないようですよ

では2つのステップを分けて実行しますが、vueのtransitionでは2つのtransform

を同時に実行できないようです.

だからこの問題を解決しよう

実はね入れ子で使えますよ

ツール/資料

mac os 10.13.3

vue公式ドキュメントhttps://cn.vuejs.org/v2/guide/transitions.html

vs code

スタート

セット私たちのtransition

効果を定義する必要がある外パンにtransition

この名前はカスタムでも書かなくてもいいので、個人的には

を書いたほうがいいと思います.

<transition name="move">
    <div class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
        <span class="inner icon-remove_circle_outline">span>
    div>
transition>

Cssの定義

nameが使用されている場合-前に書いたのはname定義の名前で、書かれていない場合はvをそのまま使えばいい

私たちがネストするアニメーションの地方もふだんのcss関係のあれらのネストに入れればいいです

/*              */
.move-enter-active, .move-leave-active
    transition: all .4s linear
    opacity: 1
    transform translate3d(0,0,0)
.move-enter, .move-leave-to /* .fade-leave-active below version 2.1.8 */
    opacity: 0
    transform translate3d(24px,0,0)

/* 
        
            ，span     
                       
            ，       ，                  
 */
.move-enter-active .inner, .move-leave-active .inner
    transition: all .4s linear
    transform rotate(0)
.move-enter .inner, .move-leave-to .inner
    transform rotate(180deg)

これにより、スクロールも

オフセットすることができる.
後記

见て简単だと気づいたかどうか、実はもともと简単だったのか、最初はバカにinを使って効果が太くないように

を使ってはいけないと思っていただけだ.

これは私の学習問題の記録のノートで、必要なのは

を参考にすることができます

ようこそ微信交流学習

私のブログへようこそ:https://yhf7.github.io/

もし何か権利侵害があれば、直ちに小編微信とqqを追加して小編に教えてください(905477376微信qq通用)、ありがとうございます!

転載先:https://juejin.im/post/5c85c37f6fb9a04a0956dcfe