Skip to content

Commit

Permalink
Merge pull request #925 from duenyang/master
Browse files Browse the repository at this point in the history
fix: 限制只注册一次transition事件
  • Loading branch information
dntzhang authored Sep 23, 2024
2 parents 85d0a06 + db9c32f commit ac7897e
Showing 1 changed file with 8 additions and 12 deletions.
20 changes: 8 additions & 12 deletions packages/omi-transition/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,17 @@ interface TransitionOptions {
}


registerDirective('transition', (dom: DomType, options: TransitionOptions) => {
registerDirective('transition', debounce((dom: DomType, options: TransitionOptions) => {
// 限制只注册一次transition事件
if(dom["__registed"]) return;
dom["__registed"] = true;

const { name, delay = 0 } = options
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'show') {
const show = getShowAttribute(dom)
dom["__updateClasses"](dom, name, show, delay, options)
updateClasses(dom, name, show, delay, options)
}
})
})
Expand Down Expand Up @@ -52,17 +56,9 @@ registerDirective('transition', (dom: DomType, options: TransitionOptions) => {
// 将 onTransitionEnd 函数存储在元素上
dom['__onTransitionEnd'] = onTransitionEnd

// 清除旧的方法
if(dom["__updateClasses"]){
dom["__updateClasses"] = null;
}

// 给每个dom添加方法,增加debounce防止enter和leave同时多次触发
dom["__updateClasses"] = debounce(updateClasses, 0);

const show = getShowAttribute(dom)
dom["__updateClasses"](dom, name, show, delay, options)
})
updateClasses(dom, name, show, delay, options)
}, 0));

function getShowAttribute(dom: HTMLElement | Component<{ show: boolean }>): boolean {
return dom.getAttribute('show') === 'true' ||
Expand Down

0 comments on commit ac7897e

Please sign in to comment.