为啥转换在我的情况下不起作用

Posted 2023-03-06

【中文标题】为啥转换在我的情况下不起作用

【英文标题】：Why the transitions do not work in my case为什么转换在我的情况下不起作用

【发布时间】：2021-09-29 19:40:36

【问题描述】：

我想知道为什么我的转换在 Wordpress 中不起作用，而在 Codepen 中却可以正常工作。悬停在项目上会改变背景，但它也应该与 transition

试图找出这是否只是我的愚蠢错误或 Wordpress 中的其他东西可能会阻止它，我已经筋疲力尽了。

Here is my codepen

：Codepen

Here is the website I'm applying it to:Wordpress page

【参考方案1】：

改变从背景到背景图像的过渡

background-image 350ms cubic-bezier(0.77, 0, 0.175, 1)

.container #picture 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f5bf30;
    transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1);

来源：http://css3.bradshawenterprises.com/cfimg/

编辑 1：

使用 1x1px 图片的初始背景

.container #picture 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8ut/gPwAHegLlBdE8JgAAAABJRU5ErkJggg==);
    transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1);

本例中使用的图片是用png-pixel生成的

编辑 2：

我查看了您对我建议的更改的实施，

您想将transition: background 1350ms cubic-bezier(0.77, 0, 0.175, 1) !important; 替换为transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1); 以进行初始设置.container #picture

当我测试它时，它就像这样完美地工作。

并删除您添加到.container #picture.one、.container #picture.two、...等的规则

编辑 3：

并排示例显示颜色到图像和图像到图像转换之间的差异；

.square 
  width:150px;
  height:150px;
  transition: background-image 350ms cubic-bezier(0.77, 0, 0.175, 1);
  float: left;
  margin-right:50px;

.example-1 
  background: #f5bf30;


.example-2 
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8ut/gPwAHegLlBdE8JgAAAABJRU5ErkJggg==);

.example-1:hover, .example-2:hover
 background-image:url(https://via.placeholder.com/150);

<div class="square example-1"></div>
<div class="square example-2"></div>

【讨论】：

嗯，这是一个很好的观点，但它不工作。我将背景更改为背景图像，并通过过渡进行了此操作。我不明白为什么......

@MarekCmarko 您可以将初始背景颜色替换为该颜色的 1px 宽 img 或替换为 base64 哈希。我将此添加到解决方案中

嗨@Jasper B，我从具体项目中删除了过渡，并将其仅用于 .container #picture。虽然我不完全了解 1x1 像素图像的技术，但我尝试过，但重新加载它时它没有任何效果......这怎么可能 - 你能看到它在这里工作吗？ harton.weboktoromniktonevie.sk/uvod

像素图像允许从静态颜色到图像的平滑过渡。由于您无法像这样从背景颜色过渡到图像，因此这个小技巧将用相同颜色的图像替换颜色。由于 2 种转换类型（例如背景和背景图像）相互冲突，您的实现似乎仍然有点不稳定（如果您在多个链接之间快速转换）。过渡所需的所有 css 都是第一次编辑中的 css

我添加了一个示例，向您展示使用像素和彩色背景之间的差异