綁定類在javascript過渡不適用

我有這樣的元素：綁定類在javascript過渡不適用

<transition v-on:enter="slideFadeIn" v-on:leave="fadeSlideOut"> 
    <div :style="{height: errHeight}" 
    v-show="errors.length > 0" 
    :class="{'height-tr': visible}">

這個轉換過程：

slideFadeIn(el, done) { 
      $(el).slideDown(function() { 
      this.visible = true; 
    }); },

而這個CSS：

.height-tr { 
transition: height .5s; 
}

正如你所看到的，我試圖在轉換完成後嘗試應用新類（此類會激活div中的高度更改）。動畫效果很好，如果我手動應用它，則該類可以正常工作，並且我已經確認在動畫完成後this.visible爲true，但該類未應用。有人知道爲什麼

來源

2016-11-30 daninthemix

爲什麼沒有這個類在任何時候，它只是有'transition'財產？ – Saurabh

因爲這個類干擾了javascript的轉換，使它變得可怕和生澀。 – daninthemix

你使用jQuery嗎？只有它看起來像this.visible超出範圍，當您嘗試並設置它：

slideFadeIn(el, done) { 
    $(el).slideDown(function() { 
    this.visible = true; // this wouldn't be the vm anymore 
    }) 
},

我明白你說的可見價值是正確的，但是這看起來並不像它會工作，所以不知道如何這是設置...

沒有，如果你也有幫助：

slideFadeIn(el, done) { 
    var vm = this 
    $(el).slideDown(function() { 
    vm.visible = true; // this wouldn't be the vm anymore 
    }) 
},

來源

2016-11-30 07:05:35 GuyC

啊，愚蠢的錯誤。謝謝！ – daninthemix

綁定類在javascript過渡不適用

回答

相關問題