zoukankan      html  css  js  c++  java
  • 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{
       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- 300px;
      border-radius:3px;
      .section{
        overflow: hidden;
        transition:height 0.3s ease-out;
        height:auto;
        border:2px solid #ffeb3b;
      }
    }
    

    flex版

  • 相关阅读:
    usb mtp激活流程【转】
    [RK3288][Android6.0] USB OTG模式及切换【转】
    简单实用的磁带转MP3方法图解
    使用log4j的邮件功能
    hive从查询中获取数据插入到表或动态分区
    map和reduce 个数的设定 (Hive优化)经典
    Mysql ERROR 145 (HY000)
    Mysql计算时间差
    小米刷机教程和GAE for android
    Hbase 使用方法
  • 原文地址:https://www.cnblogs.com/fangdongdemao/p/13209168.html
Copyright © 2011-2022 走看看