Vue.js から js 実装への移行

今回は、Vue.js から js への移行について説明します。Vue.js を使用して移行を実装する際の 注意事項 について説明します。

<template>
  <div>
    <button>Toggle</button>
    <div>
      <transition>
        <p>i am show</p>
      </transition>
    </div>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  import comB from &#39;./components/b.vue&#39;
  export default {    components: {comA, comB},
    data () {      
return
 {        show: true
      }
    },    methods: {//      
动画
执行的起始位置
      beforeEnter: function (el) {
        $(el).css({          left: &#39;50px&#39;,          opacity: 0
        })
      },      enter: function (el, done) {
        $(el).animate({          left: &#39;200px&#39;,          opacity: 1
        }, {          duration: 1500,          complete: done
        })
      },      leave: function (el, done) {
        $(el).animate({          left: &#39;500px&#39;,          opacity: 0
        }, {          duration: 1500,          complete: done
        })
      }
    }
  }</script><style>.animate-p {  
position
: absolute;  top: 100px;  left: 0;
}</style>

ラベルが非表示の場合は、leave アニメーションが実行されます。

ラベルが表示されている場合は、beforeEnter アニメーションと Enter アニメーションが実行されます

js 遷移アニメーション

Ele.me テイクアウト アプリを学習していたとき、これを見つけました。

アニメーション化するラベルにトランジションを追加

<div v-show="detailShow" class="detail" transition="fade">

CSSコード内に次のように書くこともできます

   .detail
      ......
      &.fade-transition
        opacity: 1        background: rgba(7, 17, 27, 0.8)
      &.fade-enter,&.fade-leave
        opacity: 0        background: rgba(7, 17, 27, 0)

この方法で、背景を過度に透明にしたアニメーションを簡単に実装できます

これを読んだ後、あなたは方法をマスターしたと思いますこの記事の事例など、php 中国語 Web サイトの他の関連記事にもご注目ください。

推奨読書:

Vue.js の計算プロパティとデータ監視

Vue.js イベント バインディング - 組み込みイベント バインディング、カスタム イベント バインディング

Vue.js リストの同期更新メソッドデータ

Vue.jsリストレンダリングv-for配列オブジェクトサブコンポーネント

以上がVue.js から js 実装への移行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。