时间戳

首页 > 解决方案 > 如何为图片元素中的 `srcset` 属性的变化设置动画？

angular - 如何为图片元素中的 `srcset` 属性的变化设置动画？

问题描述

我有一个具有三种尺寸的简单图片元素。

<picture class="hero-intro-image">
  <source media="(max-width: 565px)" srcset="{{data.img780x480}}">
  <source media="(min-width: 576px and max-width: 767px)" srcset="{{data.img1280x480}}">
  <source media="(min-width: 768px)" srcset="{{data.img2560x480}}">
  <img src="/assets/imgs/introduction/clint-adair-2560x480.jpg" alt="Intro Image">
</picture>

此图像位于应用程序的顶部。当用户导航到新的子页面时，图像会发生变化。现在可以延迟此更改，因为图像很大并且需要一些时间来加载。所以我想在图像发生变化时添加一个简单的动画，例如淡出 -> 淡入。https://angular.io/guide/animations中的示例定义了状态，何时触发哪个动画，但我想要一个动画，只要属性发生变化。我怎样才能做到这一点？

标签： angularangular-animations

解决方案

推荐阅读