Question

我有这个元素：

<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为真 - 但该类未被应用。谁知道为什么？

Answer 1

你在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
  })
},

绑定类不适用于javascript转换

1 个答案: