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版