0
v-showを拡張するためのカスタムディレクティブを作成しました.v-showblockは実際のスタイルに追加しています。動作しないカスタムディレクティブを使用してアニメ化
遷移/アニメーションはv-showで動作しますが、アニメーションなしで動作するv-showblockでは動作しません。
私はこの問題に焦点を当てるために私のコードを簡素化：VueJS遷移が特定の状況でのみ<transition>内の要素に取り組むため
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<body>
<div id="demo">
<button @click="toggle">Toggle</button>
<transition name="fade">
<p v-showblock="show">hello</p>
</transition>
</div>
Vue.directive('showblock',
function (el, binding) {
if (binding.value === true) {
el.style.display = 'block';
}
else {
el.style.display = 'none';
}
}
);
new Vue({
el: '#demo',
data: {
show: true
},
methods: {
toggle: function() {
this.show =!this.show;
}
}
});
あなたはそれを作成できますか？ – Saurabh
https://jsfiddle.net/w8ssj8np/1/; v-showblockでv-showblockを実行すると、遷移（フェード効果）が機能しません。 – user3541631
これはどのようにディレクティブを使用して実現できるのかよく分かりませんが、ここでは移行の使用を見ています（https：// github。 com/vuejs/vue/blob/v2.1.3/src /プラットフォーム/ web /ランタイム/ディレクティブ/ show.js） – Saurabh