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版

  • 相关阅读:
    ABP Xunit单元测试 第五篇
    ABP 异常处理 第四篇
    ABP Quartz 作业调度第三篇
    ABP 权限拦截 第二篇
    ABP .NET corej 版本 第一篇
    Vue生命周期
    vue中的import、export、requre的区别
    ES6最新语法
    Vux项目搭建
    对象克隆
  • 原文地址:https://www.cnblogs.com/fangdongdemao/p/13209168.html
Copyright © 2011-2022 走看看