Angular如何实现输入框从搜索图标位置滑入而非最右侧的动画

解决方案 #

你遇到的问题核心是输入框和搜索图标不在同一个相邻布局容器内，导致translateX(100%)的位移参考位置不符合预期，按照以下步骤修改即可实现从搜索图标位置滑入的效果：

1. 调整HTML布局结构

将搜索输入框和搜索图标包裹在同一个父容器内，保证二者位置相邻：

<!-- 外层工具栏容器保持原有逻辑即可，只需修改搜索相关部分 -->
<div class="toolbar-right">
  <!-- 搜索模块包裹容器 -->
  <div class="search-wrapper">
    <span class="search-input-wrapper">
      <input *ngIf="visibleSearch" [@slideInOut] type="search" matInput placeholder="Search" />
    </span>
    <mat-icon class="toolbar-icon" (click)="visibleSearch = !visibleSearch;">search</mat-icon>
  </div>
  <!-- 其余图标保持不变 -->
  <mat-icon class="toolbar-icon">perm_identity</mat-icon>
  <mat-icon class="toolbar-icon" matBadge="15" matBadgeColor="warn">shopping_cart</mat-icon>
</div>

2. 添加对应CSS样式

保证搜索模块布局符合动画要求：

.search-wrapper {
  display: flex;
  align-items: center;
}

.search-input-wrapper {
  /* 隐藏输入框滑入前的超出部分 */
  overflow: hidden;
  /* 可根据需求调整输入框的宽度 */
  width: 200px;
}

/* 可选：给输入框加右侧边距，避免和搜索图标挨太近 */
input[type=search] {
  margin-right: 8px;
  width: 100%;
}

3. 调整动画配置

保持原有逻辑基本不变，可额外添加透明度动画让效果更自然：

animations: [
  trigger('slideInOut', [
    transition(':enter', [
      style({
        transform: 'translateX(100%)',
        opacity: 0
      }),
      animate('200ms ease-in', style({
        transform: 'translateX(0%)',
        opacity: 1
      }))
    ]),
    transition(':leave', [
      animate('200ms ease-in', style({
        transform: 'translateX(100%)',
        opacity: 0
      }))
    ])
  ])
]

修改完成后，输入框初始会向右平移自身100%宽度，刚好叠加在搜索图标的位置，动画触发时向左滑入到正常位置，完全符合需求。

内容的提问来源于stack exchange，提问作者Steve Barthelot