javaScript 原生技巧

pop,shift 细节问题

如果本来是一个空数组,删除后,返回值为undefined

let a=[]
a.shift() //undefined

css渐变显示

递归

const rangOf = (a, b) => {
  if (a === b) {
    return [a]
  } else {
    let numbers = rangOf(a, b - 1);
    numbers.push(b);
    return numbers
  }
};
console.log(rangOf(10, 15));
// [ 10, 11, 12, 13, 14, 15 ]

代码风格

计算属性

function getKey(k) {
  return `a key name${k}`
}

let obj = {
  age: 12,
  [getKey('aaa')]: false
};
obj[getKey('333')] = true;
console.log(obj);
//{ age: 12, 'a key nameaaa': false, 'a key name333': true }

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

照片折纸效果

动画期间隐藏滚动条

<button (click)="add()">点我</button>
<ul *ngIf="count" class="bbb">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>9</li>
  <li>10</li>
</ul>
=============
.bbb{
  width: 200px;
  max-height: 200px;
  background-color: red;
  transition:max-height 1.2s ease-in-out;
  overflow: auto;
  animation: hide-scroll 1s backwards;
}
@keyframes hide-scroll {
  from{
    max-height: 0;
    overflow:hidden;
  }
  to{
    max-height: 200px;
    overflow:hidden;
  }
}  

自动尺寸使用css过渡

angular/js版

<div class="container">
  <div class="section">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="section collapsible">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="section">
    <p>Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

<button (click)="clickOne()">Toggle collapse</button>

export class OneComponent implements OnInit, AfterViewInit {
  private count = false;

  constructor() {
  }

  // 隐藏
  collapse(element) {
    // 内容的高度
    let sectionHeight = element.scrollHeight;
    // 禁止使用css 过渡转化
    // let elementTransition = element.style.transition;
    // element.style.transition = '';

    requestAnimationFrame(function() {
      element.style.height = sectionHeight + 'px';
      // element.style.transition = elementTransition;
      requestAnimationFrame(function() {
        element.style.height = 0 + 'px';
      });
    });
  }

  //展示
  public height;

  expandSection(element) {
    let h=this.height;
    var sectionHeight = element.scrollHeight;
    element.style.height = sectionHeight + 'px';
    requestAnimationFrame(function() {
      element.style.height = sectionHeight + 'px';
      requestAnimationFrame(function() {
        element.style.height = h + 'px';
      });
    });
  }

  ngOnInit(): void {

  }

  public b;
  public boleans = true;

  clickOne() {
    if (this.boleans) {
      this.collapse(this.b);
      this.boleans=false;
    } else {
      this.expandSection(this.b);
      this.boleans=true;
    }
  }

  ngAfterViewInit(): void {
    this.b = document.querySelector('.collapsible');
    this.height = this.b.scrollHeight;
  }

}

.container {
  border: 3px solid #ffeb3b;
  margin:0 auto;
  max-width: 300px;
  border-radius:3px;
  .section{
    overflow: hidden;
    transition:height 0.3s ease-out;
    height:auto;
    border:2px solid #ffeb3b;
  }
}

flex版