Angular 5 Animations鼠标悬停动画无法保持状态求助

嘿，我明白你遇到的问题了——这其实是Angular动画模块里一个很常见的小坑！你现在的动画只是触发了单次过渡，但没有定义悬停状态的持久化样式，所以动画跑完之后就立刻回滚到初始状态了。

问题根源 #

Angular的动画如果只通过transition定义从初始到目标的单次动画，而没有用state明确不同状态下的样式，那么动画执行完毕后，元素会自动回到初始样式，因为Angular不知道你要维持住目标状态。

具体解决方案 #

你需要调整动画的定义，明确状态和状态间的过渡：

1. 定义动画状态与过渡
   在组件的animations数组里，给触发器添加state来指定normal（初始）和hover（悬停）状态的样式，然后用双向过渡来处理进入和离开：

   import { trigger, state, style, transition, animate } from '@angular/animations';
   
   @Component({
     // ... 其他组件配置
     animations: [
       trigger('hoverAnimation', [
         // 初始状态样式
         state('normal', style({
           transform: 'scale(1)',
           opacity: 1,
           // 这里可以加其他初始样式
         })),
         // 悬停状态样式（动画结束后要维持的样式）
         state('hover', style({
           transform: 'scale(1.1)',
           opacity: 0.8,
           // 这里加悬停时要保持的样式
         })),
         // 双向过渡，处理鼠标进入和离开的动画
         transition('normal <=> hover', animate('300ms ease-in-out'))
       ])
     ]
   })
   

2. 用状态变量控制动画切换
   在组件类里定义一个布尔变量来跟踪悬停状态，然后绑定鼠标事件来切换这个变量：

   export class YourComponent {
     isHover = false;
   
     onMouseEnter() {
       this.isHover = true;
     }
   
     onMouseLeave() {
       this.isHover = false;
     }
   }
   

3. 模板中绑定动画和事件
   在需要动画的元素上，把动画触发器绑定到状态变量，同时绑定鼠标进入/离开事件：

   <div
     @hoverAnimation="isHover ? 'hover' : 'normal'"
     (mouseenter)="onMouseEnter()"
     (mouseleave)="onMouseLeave()"
     class="hover-element"
   >
     悬停我看看效果！
   </div>
   

更简洁的写法（可选） #

如果你想少写点代码，可以用组件的host属性直接绑定鼠标事件到状态变量：

@Component({
  // ... 其他配置
  host: {
    '(mouseenter)': 'isHover = true',
    '(mouseleave)': 'isHover = false'
  }
})

这样调整之后，当鼠标悬停时，动画会过渡到hover状态并维持住样式；鼠标离开时，再过渡回normal状态，就不会出现动画跑完立刻回滚的问题啦！

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