Skip to content

fix(drawer): Fixed the problem that the table component in the drawer component cannot be displayed normally in full screen #3782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 28, 2025
Merged

fix(drawer): Fixed the problem that the table component in the drawer component cannot be displayed normally in full screen #3782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/vue/src/drawer/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"
:style="{
width: ['left', 'right'].includes(placement) ? state.computedWidth : null,
height: ['top', 'bottom'].includes(placement) && dragable && state.height ? state.height + 'px' : null
height: ['top', 'bottom'].includes(placement) && dragable && state.height ? state.height + 'px' : null,
transform: state.visible ? 'none' : null
}"
>
<div
Expand Down
3 changes: 2 additions & 1 deletion packages/vue/src/drawer/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
:style="{
width: ['left', 'right'].includes(placement) ? state.computedWidth : null,
height: ['top', 'bottom', 'left', 'right'].includes(placement) || dragable ? state.computedHeight : null,
zIndex
zIndex,
transform: state.visible ? 'none' : null
Comment on lines +35 to +36
Copy link

@coderabbitai coderabbitai bot Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify Vue transition compatibility with the inline transform style.

The transform: 'none' inline style will override any CSS transforms defined in the Vue transition classes (e.g., .drawer-slide-left-enter-active). This is necessary to remove the containing block and fix the fullscreen table issue, but it may interfere with Vue's transition system.

Please verify that:

  1. The Vue transition classes for drawer-slide-${placement} still work correctly with the inline transform
  2. Enter and leave transitions animate smoothly without jumping
  3. The transition doesn't conflict during the enter/leave phases when Vue is adding/removing classes

Additionally, consider whether the transition CSS should be updated to avoid using transform if the inline style will always override it when visible.

🏁 Script executed:

#!/bin/bash
# Search for the drawer transition class definitions
rg -n --type=less --type=css --type=scss -A5 'drawer-slide|drawer-fade' 

# Check if there are styles that use transform for drawer animations
ast-grep --pattern $'drawer {
  $$$
  transform: $_;
  $$$
}'

Length of output: 28

🏁 Script executed:

#!/bin/bash
# Search for drawer transition CSS without strict file type
rg -n 'drawer-slide|drawer-fade' --type=css --type=less -A5

# If above finds nothing, search all files
if [ $? -ne 0 ]; then
  echo "=== Searching in all files for drawer-slide ==="
  rg -n 'drawer-slide|drawer-fade' -A5 --max-count=20
fi

# Look for Vue component style blocks or animation/keyframe definitions
echo "=== Searching for animation/keyframe definitions ==="
rg -n 'animation:|keyframes|@keyframes' --type=css --type=less | grep -i drawer

# Check if there are dedicated style files in drawer directory
echo "=== Files in drawer directory ==="
fd -e css -e less -e scss -e vue packages/vue/src/drawer 2>/dev/null | head -20

Length of output: 11155

🏁 Script executed:

#!/bin/bash
# Get complete keyframe definitions to see what properties they animate
echo "=== Complete slideLeft keyframe ==="
rg -n 'slideLeft' -A15 packages/theme/src/drawer/index.less | head -40

echo "=== Complete slideTop keyframe ==="
rg -n '@keyframes slideTop' -A10 packages/theme/src/drawer/index.less

echo "=== Complete slideRight keyframe ==="
rg -n '@keyframes slideRight' -A10 packages/theme/src/drawer/index.less

Length of output: 1581

Critical Animation Breaking Issue

The inline transform: 'none' when state.visible is true will break the drawer enter animations. All slide keyframes (slideLeft, slideRight, slideTop, slideBottom) use transform: translateX() or transform: translateY() to animate position. When the drawer opens, the inline style will override these animation values, preventing the drawer from sliding in.

The drawer will appear instantly without animation on enter, and animations will only work on leave (when transform is null).

Required: Replace the inline transform style with a CSS class approach or use CSS animation-fill-mode to preserve animation behavior while maintaining the containing block fix.

🤖 Prompt for AI Agents 
In packages/vue/src/drawer/src/pc.vue around lines 35-36, the inline style
setting transform: state.visible ? 'none' : null breaks enter animations by
overriding keyframed translate transforms; remove the inline transform and
instead toggle a CSS class (e.g., .contain-fix) when visible that applies the
containing/z-index fix without setting transform, or alternatively ensure the
animation uses animation-fill-mode (and remove the inline transform) so keyframe
translateX/translateY can run on enter; update the template to add/remove the
class and add the corresponding CSS rule to achieve the containing behavior
without an inline transform override.

}"
v-show="state.visible"
>
Expand Down
Loading