使用自定义指令的动画不起作用

Question

创建了一个自定义指令来扩展 v-show，v-showblock 添加了 true 样式：display: block；

transitions/animations 正在使用 v-show 但不使用 v-showblock，它在没有动画的情况下工作。

我简化了我的代码以专注于这个问题：

<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;
         }
      }
    });

Answer 1

这不起作用，因为 VueJS 转换只在某些情况下对 <transition> 内的元素起作用：

v-if 状态变化
v-show 状态变化
组件

在您的情况下，您正在尝试 hide/show 使用不受支持的自定义指令 v-showblock。如果您在那里使用 v-if 或 v-show，那么转换将起作用。

在 VueJS docs 阅读更多内容。

使用自定义指令的动画不起作用

Animate using custom directive not working

vue.js

vuejs2