Angular实现图片悬停随机旋转，TypeScript变量传值到CSS遇阻

核心思路 #

通过CSS自定义属性（CSS变量）传递TS生成的随机角度，伪类可以直接读取当前元素上定义的CSS变量，解决ngStyle无法直接修改hover状态的问题。

具体实现步骤 #

1. 修改TypeScript代码 #

为每张图片生成独立的随机旋转角度，推荐范围控制在-5°~5°之间，效果更自然：

export class PhotosComponent implements OnInit {
  // 定义图片列表，包含图片地址和随机旋转角度
  photoList = [
    {url: 'https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'},
    {url: 'https://images.unsplash.com/photo-1583585635793-0e1894c169bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=913&q=80'},
    // 剩余图片地址按上面格式补充即可
  ].map(item => {
    // 生成-5到5度的随机角度
    const randomAngle = (Math.random() - 0.5) * 10;
    return {...item, rotateAngle: `${randomAngle}deg`}
  })

  constructor() { }

  ngOnInit(): void {
  }
}

如果不想把所有图片都整理成数组，也可以单独为每个img声明随机角度变量，逻辑完全一致。

2. 修改HTML代码 #

通过Angular的[style.--xxx]语法，把随机角度绑定为img元素的CSS自定义属性：

<div class="back">
   <div class="row">
      <div class="column">
         <!-- 可以用*ngFor循环渲染图片，不用重复写img标签 -->
         <ng-container *ngFor="let photo of photoList.slice(0,6)">
           <img 
             [src]="photo.url" 
             style="width:100%"
             [style.--rotate-angle]="photo.rotateAngle"
           >
         </ng-container>
      </div>
      <div class="column">
         <ng-container *ngFor="let photo of photoList.slice(6,12)">
           <img 
             [src]="photo.url" 
             style="width:100%"
             [style.--rotate-angle]="photo.rotateAngle"
           >
         </ng-container>
      </div>
      <!-- 剩余两个column按上面的逻辑补充，调整slice的区间即可 -->
   </div>
</div>

3. 修改CSS代码 #

在hover的transform属性中直接使用定义好的CSS变量即可：

.column img:hover {
    box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
    /* 同时保留缩放效果，追加旋转属性读取CSS变量 */
    transform: scale(1.025) rotate(var(--rotate-angle));
 }

扩展说明 #

如果需要实现每次悬停都更换随机角度的效果，只需要给img绑定(mouseenter)事件，触发时重新生成随机角度赋值给对应元素的--rotate-angle变量即可。

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