单击时的Javascript切换动画

Question

我是 Javascript 的新手，正在尝试找出实现以下目标的最佳方法。

我设置了这个页面，由 HTML 和 CSS 组成:

https://jsfiddle.net/59ykx03y/3/

我需要做的是当用户点击图像容器时，两个 h2 标签都需要动画到图像顶部的中间/中心，以便它在一行中读取 Lorem Ipsum。我还需要将文本颜色更改为白色而不是蓝色。当用户再次点击时，文字颜色会变回原来的蓝色，位置也会变回原来的样子。所以我想我需要切换它。

然后我需要找出一种方法来防止此代码在小于 920 像素的视口(viewport)中运行，因为布局不同。理想情况下，我希望用户在这些较小屏幕设备上点击图像，然后文本会以动画形式在图像顶部的单独行中显示 Lorem 和 Ipsum。

我最初尝试添加一个“click”事件监听器，并运行一个if/else 语句来测试。

imgContainer.addEventListener('click', function() {
  if(lorem.style.color === "blue") {
    lorem.style.color = '#ffffff';
  }
  else {
    lorem.style.color = 'blue';
  }
});

但我觉得有一种更简单的方法可以解决这个问题而无需重复我自己。

请注意我必须为此使用 vanilla JS 而不是 jQuery。

期待您的解答!

Answer 1

问:"我还需要将文本颜色更改为白色而不是蓝色。当用户再次点击时，文本颜色将恢复为原来的蓝色，位置将恢复为最初的位置。"

答:

//将这个类添加到你的 CSS 中

.hdr-color-white{
  color: white;
}

//添加到您当前的事件处理程序

imgContainer.addEventListener('click', function() {
  lorem.classList.toggle("hdr-color-white");
  ipsum.classList.toggle("hdr-color-white");
});

问:“然后我需要找出一种方法来防止此代码在小于 920px 的视口(viewport)中运行，因为布局不同。理想情况下，我希望用户点击这些较小屏幕设备上的图像，并且文本会动画化在图像顶部以各自单独的行显示 Lorem 和 Ipsum。”

答:防止代码在小于 920px 的视口(viewport)中运行

@media screen and (max-width: 920px) {
  hdr-color-white{
    /*empty*/
  }
}

您还可以通过窗口对象的 window.screen.width 方法测试宽度。

要重新定位 Lorem 和 Ipsum 文本，请使用 CSS 通过 position、top、left 和 transform 属性将它们 float 到所需位置。检查此链接以获取有关定位的更详细说明。 https://css-tricks.com/absolute-positioning-inside-relative-positioning/

当在所需位置时，您可以使用 转换:translateX(值)；//如果添加到类中可以切换