adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 14:29:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: modal animation

Browse source
This commit is contained in:
luoxiao 2024-02-20 20:55:44 +08:00 • committed by luoxiaozero
parent 412742f2ca
commit ae0bbb1644
1 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
thaw/src/modal/mod.rs
View file

@ -15,7 +15,7 @@ pub fn Modal(
#[prop(into)] show: Model<bool>, #[prop(into)] show: Model<bool>,
#[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>, #[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>,
#[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>, #[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>,
#[prop(default = MaybeSignal::Static("75%".to_string()), into)] width: MaybeSignal<String>, #[prop(default = MaybeSignal::Static("600px".to_string()), into)] width: MaybeSignal<String>,
#[prop(optional, into)] title: MaybeSignal<String>, #[prop(optional, into)] title: MaybeSignal<String>,
children: Children, children: Children,
#[prop(optional)] modal_footer: Option<ModalFooter>, #[prop(optional)] modal_footer: Option<ModalFooter>,
@ -50,16 +50,15 @@ pub fn Modal(
let x = -(modal_el.offset_left() - position.0); let x = -(modal_el.offset_left() - position.0);
let y = -(modal_el.offset_top() - position.1 - scroll_top); let y = -(modal_el.offset_top() - position.1 - scroll_top);
let mut style = format!("--thaw-width: {};", width.get_untracked()); let _ = modal_el.attr("style", format!("transform-origin: {}px {}px", x, y));
style.push_str(&format!("transform-origin: {}px {}px;", x, y));
let _ = modal_el.attr("style", style);
}; };
view! { view! {
<Teleport> <Teleport>
<div <div
class="thaw-modal-container" class="thaw-modal-container"
style=move || format!("z-index: {};", z_index.get()) style:z-index=move || z_index.get()
style=("--thaw-width", move || width.get())
> >
<CSSTransition <CSSTransition
node_ref=mask_ref node_ref=mask_ref