vueレンダー機能が正しく動作しない

Question

テストのために崩壊遷移フォームelement.eleme.ioを抽出しました。 ただし、コードが期待どおりに機能しません。 render関数が呼び出されましたが、Transitionクラスが提供するメソッドは使用されていませんでした。 レンダリング機能を正しく使用する方法をGoogleに試しましたが、その情報はあまりありませんでした。誰でもiusseを解決する方法を知っていますか？

崩壊tranisition.js

class Transition { 
    beforeEnter (el) { 
    el.classList.add('collapse-transition') 
    if (!el.dataset) el.dataset = {} 

    el.dataset.oldPaddingTop = el.style.paddingTop 
    el.dataset.oldPaddingBottom = el.style.paddingBottom 

    el.style.height = '0' 
    el.style.paddingTop = 0 
    el.style.paddingBottom = 0 
    } 

    enter (el) { 
    el.dataset.oldOverflow = el.style.overflow 
    if (el.scrollHeight !== 0) { 
     el.style.height = el.scrollHeight + 'px' 
     el.style.paddingTop = el.dataset.oldPaddingTop 
     el.style.paddingBottom = el.dataset.oldPaddingBottom 
    } else { 
     el.style.height = '' 
     el.style.paddingTop = el.dataset.oldPaddingTop 
     el.style.paddingBottom = el.dataset.oldPaddingBottom 
    } 

    el.style.overflow = 'hidden' 
    } 

    afterEnter (el) { 
    el.classList.remove('collapse-transition') 
    el.style.height = '' 
    el.style.overflow = el.dataset.oldOverflow 
    } 

    beforeLeave (el) { 
    if (!el.dataset) el.dataset = {} 
    el.dataset.oldPaddingTop = el.style.paddingTop 
    el.dataset.oldPaddingBottom = el.style.paddingBottom 
    el.dataset.oldOverflow = el.style.overflow 

    el.style.height = el.scrollHeight + 'px' 
    el.style.overflow = 'hidden' 
    } 

    leave (el) { 
    if (el.scrollHeight !== 0) { 
     el.classList.add('collapse-transition') 
     el.style.height = 0 
     el.style.paddingTop = 0 
     el.style.paddingBottom = 0 
    } 
    } 

    afterLeave (el) { 
    el.classList.remove('collapse-transition') 
    el.style.height = '' 
    el.style.overflow = el.dataset.oldOverflow 
    el.style.paddingTop = el.dataset.oldPaddingTop 
    el.style.paddingBottom = el.dataset.oldPaddingBottom 
    } 
} 

export default { 
    name: 'MyCollapseTransition', 
    functional: true, 
    render (h, { children }) { 
    const data = { 
     on: new Transition() 
    } 

    return h('transition', data, children) 
    } 
} 

App.vue

<template> 
    <div id="app"> 
    <collapse-transition> 
     <div v-show="show"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
      <li>Item 5</li> 
     </ul> 
     </div> 
    </collapse-transition> 
    <button @click="show = !show">Show</button> 
    </div> 
</template> 

<script> 
import CollapseTransition from './utils/collapse-transition' 

export default { 
    components: { 
    CollapseTransition 
    }, 
    data() { 
    return { 
     show: true 
    } 
    } 
} 
</script> 

<style> 
.collapse-transition { 
    transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; 
} 
</style> 

Answer 1

on

プロパティプレーンオブジェクトではなく、クラスのインスタンスを期待します。正確には、Vueはfor .. inを使用してそのオブジェクトのプロパティをループしますが、これはクラスメソッドでは機能しません。

なぜあなたはここでクラスを使用しますか？