3

我希望我网页上的所有图像都具有 CSS 类“淡入淡出”，这样当它们第一次出现时，它们就会淡入视野。（我使用 CSS 动画来做淡入淡出。后来，我使用 jquery 来添加和删除类。）

我通常会制作一个 img 元素并使用myImg.addClass("fadeIn")，但该元素是在谷歌地图的代码中制作的，我无权访问元素。img实际创建元素的时间也不确定。

像这样的东西，在 CSS 中：

img {
   height: 100;
   width: 50;
   AddClassToThisElement: "fadeIn"  ***
}

这样的事情可能吗？

编辑：我拥有的实际 CSS 是：

  img[src^="da"] {
    -webkit-animation-name: fadeInFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

  .fadeOut {
    -webkit-animation-name: fadeOutFrames;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
  }

前者更具体，因此向元素添加类 fadeOut 不起作用。通过更改.fadeOut为img[src^="da"].fadeOut，后者现在更加具体，并且在元素中添加了 fadeOut 。

4

3 回答 3

2

据我所知，CSS 无法做到这一点。

那么，我的建议是使用这样的东西：

img,
.fadeIn
{
    /* styling */
}

现在所有图像的样式都与.fadeIn. 当然，您还必须为样式表中img,的每次使用添加任何相关的（伪）选择器/类。.fadeIn

于 2012-07-30T17:36:08.907 回答
1

如果您使用 jQuery 进行淡入，您可能会想出一个对这些图像唯一的选择器，而不是使用基本的 $('.fadeIn') 选择器。

所以如果你在做

$('.fadeIn').fadeIn()

您可能会发现 DOM 结构中有些东西是这些图像所独有的，例如

$('#SomeMapId div#SomeContainerId IMG').fadeIn()

如果没有看到您的页面，我不能说 DOM 是否足够独特以使其工作。

于 2012-07-30T17:38:36.547 回答
1

我同意 DragoonWraith 的观点，如果您真的希望“我网页上的所有图像”都具有这种淡化效果，那么您应该能够更通用地定位它们。但是，如果您需要更多特异性，请找出路径。我的回答类似于 Leslie Hanks（他在我完成此之前发布），除了据我了解，您最初不想使用 jQuery，而是想要使用 css 转换。因此，如果您需要更多特异性，请找出路径：

#someGoogleMapId .someDeepContainerClass img {
   /* apply the css transitions */
}
于 2012-07-30T17:43:39.747 回答