本文整理匯總了TypeScript中@ephox/alloy.NativeEvents.transitionend方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript NativeEvents.transitionend方法的具體用法？TypeScript NativeEvents.transitionend怎麽用？TypeScript NativeEvents.transitionend使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.NativeEvents的用法示例。
在下文中一共展示了NativeEvents.transitionend方法的2個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: function
Form.sketch(function (parts) {
return {
dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog"></div>'),
components: [
Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog-chain" style="left: 0px; position: absolute;"></div>'),
components: Arr.map(spec.fields, function (field, i) {
return i <= spec.maxFieldIndex ? Container.sketch({
dom: UiDomFactory.dom('<div class="${prefix}-serialised-dialog-screen"></div>'),
components: [
navigationButton(-1, 'previous', (i > 0)),
parts.field(field.name, field.spec),
navigationButton(+1, 'next', (i < spec.maxFieldIndex))
]
}) : parts.field(field.name, field.spec);
})
})
],
formBehaviours: Behaviour.derive([
Receivers.orientation(function (dialog, message) {
reposition(dialog, message);
}),
Keying.config({
mode: 'special',
focusIn (dialog/*, specialInfo */) {
focusInput(dialog);
},
onTab (dialog/*, specialInfo */) {
navigate(dialog, +1);
return Option.some(true);
},
onShiftTab (dialog/*, specialInfo */) {
navigate(dialog, -1);
return Option.some(true);
}
}),
AddEventsBehaviour.config(formAdhocEvents, [
AlloyEvents.runOnAttached(function (dialog, simulatedEvent) {
// Reset state to first screen.
resetState();
const dotitems = memDots.get(dialog);
Highlighting.highlightFirst(dotitems);
spec.getInitialValue(dialog).each(function (v) {
Representing.setValue(dialog, v);
});
}),
AlloyEvents.runOnExecute(spec.onExecute),
AlloyEvents.run(NativeEvents.transitionend(), function (dialog, simulatedEvent) {
const event = simulatedEvent.event() as any;
if (event.raw().propertyName === 'left') {
focusInput(dialog);
}
}),
AlloyEvents.run(navigateEvent, function (dialog, simulatedEvent) {
const event = simulatedEvent.event() as any;
const direction = event.direction();
navigate(dialog, direction);
})
])
])
};
})示例2: Cell
const renderContextToolbar = (spec: { onEscape: () => Option<boolean>, sink: AlloyComponent }) => {
const stack = Cell([ ]);
return InlineView.sketch({
dom: {
tag: 'div',
classes: [ 'tox-pop' ]
},
fireDismissalEventInstead: {
event: 'doNotDismissYet'
},
onShow: (comp) => {
stack.set([ ]);
InlineView.getContent(comp).each((c) => {
Css.remove(c.element(), 'visibility');
});
Class.remove(comp.element(), resizingClass);
Css.remove(comp.element(), 'width');
},
inlineBehaviours: Behaviour.derive([
AddEventsBehaviour.config('context-toolbar-events', [
AlloyEvents.runOnSource<SugarEvent>(NativeEvents.transitionend(), (comp, se) => {
InlineView.getContent(comp).each((c) => {
// Css.remove(c.element(), 'opacity');
});
Class.remove(comp.element(), resizingClass);
Css.remove(comp.element(), 'width');
}),
AlloyEvents.run<ChangeSlideEvent>(changeSlideEvent, (comp, se) => {
// If it was partially through a slide, clear that and measure afresh
Css.remove(comp.element(), 'width');
const currentWidth = Width.get(comp.element());
InlineView.setContent(comp, se.event().contents());
Class.add(comp.element(), resizingClass);
const newWidth = Width.get(comp.element());
Css.set(comp.element(), 'width', currentWidth + 'px');
InlineView.getContent(comp).each((newContents) => {
se.event().focus().bind((f) => {
Focus.focus(f);
return Focus.search(comp.element());
}).orThunk(() => {
Keying.focusIn(newContents);
return Focus.active();
});
});
Delay.setTimeout(() => {
Css.set(comp.element(), 'width', newWidth + 'px');
}, 0);
}),
AlloyEvents.run<ForwardSlideEvent>(forwardSlideEvent, (comp, se) => {
InlineView.getContent(comp).each((oldContents) => {
stack.set(stack.get().concat([
{
bar: oldContents,
// TODO: Not working
focus: Focus.active()
}
]));
});
AlloyTriggers.emitWith(comp, changeSlideEvent, {
contents: se.event().forwardContents(),
focus: Option.none()
});
}),
AlloyEvents.run<BackwardSlideEvent>(backSlideEvent, (comp, se) => {
Arr.last(stack.get()).each((last) => {
stack.set(stack.get().slice(0, stack.get().length - 1));
AlloyTriggers.emitWith(comp, changeSlideEvent, {
// Because we are using premade, we should have access to the same element
// to give focus (although it isn't working)
contents: GuiFactory.premade(last.bar),
focus: last.focus
});
});
}),
]),
Keying.config({
mode: 'special',
onEscape: (comp) => {
return Arr.last(stack.get()).fold(
() => {
// Escape just focuses the content. It no longer closes the toolbar.
return spec.onEscape();
},
(_) => {
AlloyTriggers.emit(comp, backSlideEvent);
return Option.some(true);
}
);
}
})
]),
//.........這裏部分代碼省略.........