test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 12:08:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Resize-sensor 支持初始是隐藏状态的情况

Browse Source
This commit is contained in:
liaoxuezhi 2019-11-13 16:42:50 +08:00
parent 7ce54373ae
commit 8ce8b0125f
2 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_utilities.scss
View File

@ -1476,6 +1476,12 @@
word-wrap: break-word;
}
@keyframes resizeSensor {
from {
opacity: 0;
}
}
@media (min-width: 768px) {
.col-sm-2-4 {
width: 20%;

48
src/utils/resize-sensor.ts
View File

@ -37,42 +37,39 @@ function attachResizeEvent(element: HTMLElement, resized: Function) {
return;
}
(element as any).resizeSensor = document.createElement('div');
(element as any).resizeSensor.className = 'resize-sensor';
const resizeSensor = ((element as any).resizeSensor = document.createElement(
'div'
));
resizeSensor.className = 'resize-sensor';
let style =
'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;';
let styleChild = 'position: absolute; left: 0; top: 0;';
(element as any).resizeSensor.style.cssText = style;
(element as any).resizeSensor.innerHTML =
'<div class="resize-sensor-expand" style="' +
style +
'">' +
'<div style="' +
styleChild +
'"></div>' +
'</div>' +
'<div class="resize-sensor-shrink" style="' +
style +
'">' +
'<div style="' +
styleChild +
' width: 200%; height: 200%"></div>' +
'</div>';
element.appendChild((element as any).resizeSensor);
resizeSensor.style.cssText = style;
resizeSensor.innerHTML = `
<div class="resize-sensor-expand" style="${style}">
<div style="${styleChild}"></div>
</div>
<div class="resize-sensor-shrink" style="${style}">
<div style="${styleChild} width: 200%; height: 200%"></div>
</div>
<div class="resize-sensor-appear" style="${style}animation-name: resizeSensor; animation-duration: 0.2s;"></div>`;
// 要定义 resizeSensor 这个动画，靠这个监听出现。
element.appendChild(resizeSensor);
if (!~['fixed', 'absolute'].indexOf(getComputedStyle(element, 'position'))) {
element.style.position = 'relative';
}
let expand = (element as any).resizeSensor.childNodes[0];
let expandChild = expand.childNodes[0];
let shrink = (element as any).resizeSensor.childNodes[1];
let shrinkChild = shrink.childNodes[0];
const expand = resizeSensor.children[0] as HTMLElement;
const expandChild = expand.children[0] as HTMLElement;
const shrink = resizeSensor.children[1] as HTMLElement;
// let shrinkChild = shrink.children[0] as HTMLElement;
const appear = resizeSensor.children[2] as HTMLElement;
let lastWidth: number, lastHeight: number;
let reset = function() {
const reset = function() {
expandChild.style.width = expand.offsetWidth + 10 + 'px';
expandChild.style.height = expand.offsetHeight + 10 + 'px';
expand.scrollLeft = expand.scrollWidth;
@ -99,7 +96,7 @@ function attachResizeEvent(element: HTMLElement, resized: Function) {
}
};
let onScroll = function() {
let onScroll = function(e: Event) {
if (
element.offsetWidth != lastWidth ||
element.offsetHeight != lastHeight
@ -111,6 +108,7 @@ function attachResizeEvent(element: HTMLElement, resized: Function) {
addEvent(expand, 'scroll', onScroll);
addEvent(shrink, 'scroll', onScroll);
addEvent(appear, 'animationstart', reset);
}
function detach(element: HTMLElement) {