Question

创建了一个自定义指令来扩展v-show，v-showblock正在添加真正的样式：display：block;

过渡/动画正在使用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状态更改
部件

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

在VueJS docs中阅读更多内容。

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

1 个答案: