Angular 如何避免使用CSS动画制作的幻灯片中闪烁

发布于04月15日

我用Angular制作了一个简单的幻灯片，其中包含CSS动画.它工作得很好，但我会在图像之间遇到白色闪烁，我想这取决于图像加载. 有没有方法可以避免这种闪烁并使其无缝？

CSS file

.bg{
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;

    height: 100vh;

    animation: BgAnimation forwards;
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
}

@keyframes BgAnimation {
    0%   { background-image: url(../../assets/outro/1.jpg); }
    33%  { background-image: url(../../assets/outro/2.png); }
    66%  { background-image: url(../../assets/outro/3.jpg); }
    100%  { background-image: url(../../assets/outro/4.png); }
}

HTML file

<div class="bg"></div>

推荐答案

Angular 方法是在代码中使用ngOptimizedImage指令，然后将代码转换为处理图像标签而不是背景图像！

ngOptimizedImage getting started

ngOptimizedImage docs

我们可以使用盗版属性来提高资源加载的优先级！

<img ngSrc="cat.jpg" width="400" height="200" priority>

您可以在动画开始之前使用下面的CSS预加载图像(由于body标签在第一次加载时显示，这将立即加载内容中提到的图像)

body {
    position: relative;
}

body:after {
    content: url(https://placehold.co/600x400/000000/FFFFFF/png) url(https://placehold.co/600x400/FFFFFF/000000/png) url(https://placehold.co/600x400/000000/FFFFFF/png) url(https://placehold.co/600x400/FFFFFF/000000/png);
    height: 0px;
    width: 0px;
    visibility: hidden;
    position: absolute;
    top: -1000px;
}

您可以将图像编码为base64，以便它们始终存在于HTML中，但请注意，这会增加您的HTML页面的大小(浪费大小)，但这意味着图像立即可用！

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANS...");

base64 image encoder

Angular相关问答推荐

嵌套formArrays的HTML迭代

更改图表上的光标以进行zoom

如何在ANGLING v17中使用鞋带样式组件？

PrimeNg选项卡视图选项卡

MAT-复选框更改事件未在onSubscriberCheck函数中返回选中的值

如何防止打印后的空格后的HTML元素的Angular ？

Angular 应用程序未在Azure应用程序服务中运行

MatTooltip 显示在 html 原生对话框下方

如果Angular 数据为空，如何设置N/A

Storybook 和 Angular 交互游戏测试未定义预期

将 injectiontoken 用于 Angular 中的模块特定设置

Angular：显示带有嵌套子项的内容投影

Angular 2 二传手与 ngOnChanges

无法读取 angular2 中未定义(…)的属性 push

Angular 2+ 一次性绑定

如何在不刷新整页的情况下更新组件

如何在 bootstrap Angular 2 应用程序时调用休息 api

由于时区，Angular 4 日期管道显示错误的日期 - 如何解决这个问题？

Angular 2 通过 [class.className] 绑定添加多个类

Angular 2 - 组件内的 formControlName

实用课程推荐