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

创建了自定义指令来扩展v-show，v-showblock正在添加true样式：display：block;使用自定义指令不起作用的动画

的转换/动画与V型秀的工作，但不与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; 
     } 
     } 
    });

来源

2016-12-17 user3541631

你可以创建一个jsfiddle吗？ – Saurabh

https://jsfiddle.net/w8ssj8np/1/;用v-show过渡工作，用v-showblock过渡（淡入淡出效果）不起作用 – user3541631

我不知道如何用指令实现这个，我看到使用了transition [here]（https：// github。 COM/vuejs/VUE/BLOB/V2.1.3/src目录/平台/网络/运行/指令/ show.js） – Saurabh

这不是工作，因为VueJS过渡上的元素内<transition>只在某些情况下工作：

v-if状态改变
v-show状态改变
部件

你的情况，你试图隐藏/使用自定义指令v-showblock，这是不支持的展会。如果您在那里使用v-if或v-show，那么过渡将起作用。

更多的VueJS docs。

来源

2016-12-18 23:49:49

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

回答

相关问题