绑定类不适用于 javascript 转换答案

【问题标题】：Bound class not applying in javascript transition绑定类不适用于 javascript 转换
【发布时间】：2017-04-14 09:29:50
【问题描述】：

我有这个元素：

<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 在动画完成后为真 - 但没有应用该类。有人知道为什么吗？

【问题讨论】：

为什么不一直有这个类，它只有transition 属性？
因为类干扰了 javascript 转换，使它变得可怕和生涩。

标签： vue.js

【解决方案1】：

你在使用 jQuery 吗？只有当您尝试设置 this.visible 时，它看起来超出了范围：

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

感谢您说 visible 的值是正确的，但这看起来行不通，所以不确定如何设置...

如果你有帮助：

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

【讨论】：