summary

[yangbo5207]

1. 一个元素有多个classname的处理方式

// old
<button className={ isTrue ? 'btn active' : 'btn' }>test</button>

// now
var cls = classnames('btn', {
    active: isTrue
})

<button className={cls}>test</button>

// classname 拼接
export const classnames = (...args) => {
    const arr = args.reduce((res, cur, i) => {
        // string
        if (typeof cur === 'string') {
            res.indexOf(cur) == -1 && res.push(cur);
        }

        // Object
        if (/Object/.test(Object.prototype.toString.call(cur))) {
            for (let cls in cur) {
                if (cur[cls] === true && res.indexOf(cls) == -1) {
                    res.push(cls);
                }
            }
        }

        return res;
    }, []);

    return arr.join(' ');
};

const ivtCls = classnames('invite2018-sharebanner-wrap', {
    'slide-up': show,
    'slide-down': !show,
    'iphonex': isIphoneX && isWeixin
});

2. rem

移动端适配解决方案。

html {
    font-size: 100px;
}

1rem = 100px

.btn {
    width: 1rem;    // 100px
    height: 0.5rem; // 50px
}

当设计图尺寸 750 x height, html字体大小100px

设备宽度 375px / 设计图宽度 750px = 按钮宽度 / 设计图按钮宽度 100px
=>
按钮宽度 = 375 / 750 * 100px = 50px
又 1rem = 100px，

得到结论：当在设计图上量出尺寸为100px时，写入css的值为0.5rem，
设计图100px => 0.5rem

期望结果： 设计图量出的宽度除100即可得到rem值。根据上面的计算过程

当设计图 750px时，设置html字体大小为 50px, 则 设计图100px = 1rem // ps设计稿 当设计图 375px时，设置html字体大小为100px, 则 设计图100px = 1rem // sketch设计稿

<script>
// DOMContentLoaded DOM加载玩，render之前
    var timer = null;
    document.addEventListener('DOMContentLoaded', function() {
        window.addEventListener('resize', function() {
            clearTimeout(timer);
            timer = setTimeout(a, 300);
        }, !1);
    }, !1);
    a();
    function a() {
        var clientWidth, _width = document.documentElement.clientWidth;
        if (_width > 568) {
            clientWidth = 568;
        } else if (_width < 320) {
            clientWidth = 320;
        } else {
            clientWidth = _width;
        }
        document.documentElement.style.fontSize = clientWidth / 375 * 100 + 'px';
    }
</script>

3. 判断滚动方向

// firefox
if(Element.addEventListener){
    Element.addEventListener('DOMMouseScroll', function(event){
        event.target.innerHTML = event.detail; //滚动的值
    }, false);
}

// ie & chrome & opera & safari
Element.onmousewheel = function(event) {
    event = event || window.event;
    Element.innerHTML = event.wheelDelta; //滚动的值
};

缺点：绑定的事件不一样，以及滚动值的正负是反的

我的解决方案

scroll = e => {
    this.status.curTop = getScrollTop();
    let disY = this.status.curTop - this.status.preTop;
    let show = disY < 0 ? true : false;

    // 移动端滚动超出两边边界
    if (this.status.curTop < 0 || this.status.curTop + getClientHeight() > getScrollHeight()) {
        return;
    }

    if (this.status.index != 0 && show !== this.state.show) {
        this.setState({
            show
        });
    }

    this.timer = setTimeout(() => {
        this.status.preTop = this.status.curTop;
        this.status.index += 1;
        clearTimeout(this.timer);
    }, 50);
};

4. 官网动画实现原理

首先定义一个class如下，将会参与动画的元素(或其父级)都添加该class以隐藏。

.aninode {
  visibility: hidden;
}

并在同元素(或父级)添加了animated时，元素显示。

.animated {
  &.aninode, .aninode {
    visibility: visible;
  }
}

并在运动元素的class中添加了animated时，运动生效，因此定义运动css时，应该这样做：

.animated {
  &.flyTopIn, .flyTopIn {
    animation-name: flyTopIn;
    animation-duration: 1s;
  }
  /* more */
}

因此，运动元素在运动开始之前，应该保持这样

<div class="test aninode flyTopIn"></div>

需要运动时，在该元素的class中添加animated即可。

<div class="test aninode flyTopIn animated"></div>

// or

<div class="animated">
  <div class="test aninode flyTopIn"></div>
</div>

使用sass的循环语法定义delay样式

@for $i from 0 through $delay_count {
  .animated .delay#{$i * 100} {
    animation-delay: $i * 100;
    animation-fill-mode: backwards;
  }
}