优化——outerHeight、offsetHeight、clientHeight、淡入淡出和下拉收起

学习目标：

摒弃jQuery优化

---

学习内容：

1、 替换jQuery中的outerHeight() 2、 掌握 offsetHeight与clientHeight的区别 3、替换fadeIn、fadeOut 4、替换slideUp、slideDown

---

学习产出：

1、 如下

function outerHeight(dom) {
      var marginTop=getStyle(dom,'marginTop');
      var marginBottom=getStyle(dom,'marginBottom');
      return dom.offsetHeight + parseInt(marginTop.substring(0,marginTop.length-2)) + parseInt(marginTop.substring(0,marginBottom.length-2))
    }

2、offsetHeight的值包括元素内容+内边距+边框，而clientHeight的值等于元素内容+内边距。区别就在于有没有边框~
3、 如下

// fadeIn、fadeOut
.fade-leave {
  /* 定义 出场动画的 起始状态 */
  /* 只停留一帧 */
  // transform: translateY(100px);
  transform: translateY(0px);
}

.fade-leave-active {
  /* 定义 出场动画 过程 */
  transition: all 1s ease;
}

.fade-leave-to {
  /* 定义 出场动画 结束状态（即：该动画要达到的目标状态） */
  // transform: translateY(300px);
  transform: translateY(0px);
  opacity: 0;
}

/* 定义  入场动画 */

.fade-enter {
  /* 定义 入场动画 的起始状态 */
  // transform: translateY(300px);
  transform: translateY(0px);
  opacity: 0;
}

.fade-enter-active {
  /* 定义 入场动画 过程 */
  transition: all 2s ease;
}

.fade-enter-to {
  /* 定义 入场动画 过程 */
  /* 只停留一帧 */
  transform: translateY(0px);
}

4、如下

// slideUp、slideDown
.sub-comments-leave {
  max-height: 0;
}
.sub-comments-leave-active {
  transition: max-height 0.3s 0.05s;
}
.sub-comments-leave-to {
  max-height: 4rem ;
}
.sub-comments-enter {
  max-height: 4rem ;
}
.sub-comments-enter-active {
  transition: max-height 0.3s 0.05s;
}
.sub-comments-enter-to {
  max-height: 0 ;
}