javascript - 删除动画和显示全尺寸图像 HTML/CSS/JS 的问题

Question

我在 html、css、js 上写了一个小元素。 我有一个 20% 宽度的图像，它以无限动画从左到右移动。 例如:

.img {
    width: 20%,
    animation: move infinite;
}
@keyframes move {
    from {
        left: 100%;
    }
    to {
        left: -50%;
    }
}

我想要，当我按下图像以其实际宽度到达屏幕中心时。 我的问题是当我删除动画类(因为它需要停止移动)时，我丢失了图像的左和顶部属性，而且从 20% 宽度到全宽度的过渡也不能顺利进行。关于如何实现的任何想法？

谢谢

Answer 1

你基本上正确地在问题中写下了要求。问题是，您没有按部就类地编写您想要的代码。像这样再次阅读您的要求:

1. I have an 20% width image that moves with an infinite animation left to right

2. I want, when I press the image to come to the center of the screen with its actual width.

3. My problem is when I remove the animation class (cause it needs to stop moving)

所以基本上有3种状态:

1. 图像 具有任何样式，图像类 => .img
2. animation 图像有某种动画，animation class => .animate
3. finished 在某个阶段我们有一个“finished”动画状态，finished class => .finish

就像这样，您已经在 CSS 中定义了三个状态，稍后您可以在其中为任何给定状态添加/删除属性，并且可以向元素(在本例中为图像)添加/删除类。

(因为点击移动元素真的很难，我创建了一个带有点击区域的包装器。显然你可以将点击事件监听器改回图像并尝试，点击它真的很难。 ..)

var image = document.querySelector('img');
var clickArea = document.querySelector('.click-area');
clickArea.addEventListener('click', function(){
    image.classList.add('finish');
    image.classList.remove('animate');
});

.wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  border: solid 2px orange;
}

.img {
    position: absolute;
}

.finish {
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%); /* Firefox */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -o-transform: translate(-50%, -50%); /* Opera */
}

.animate {
    width: 20%;
    animation: move infinite 2s;
}

@keyframes move {
    from { left: 100%; }
    to { left: -50%; }
}

<div class="wrapper click-area">
  <img class="img animate" src="https://picsum.photos/200/300" />
</div>

如果同一页面上有多个这样的图片，那几乎是一样的!自己找出差异。

var clickAreas = document.querySelectorAll('.click-area');

[...clickAreas].forEach(function(clickArea){
    var image = clickArea.querySelector('img'); // find only the image inside the click-area
    clickArea.addEventListener('click', function(){
        image.classList.add('finish');
        image.classList.remove('animate');
    });
});

.wrapper {
  position: relative;
  width: 100%;
  height: 100px; /* tweaked the height so we can see more the just one */
  border: solid 2px orange;
}

.img {
    position: absolute;
    width: auto;  /* tweaked the height so we can see more the just one */
    height: 100px;  /* tweaked the height so we can see more the just one */
}

.finish {
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%); /* Firefox */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -o-transform: translate(-50%, -50%); /* Opera */
}

.animate {
    width: 20%;
    animation: move infinite 2s;
}

@keyframes move {
    from { left: 100%; }
    to { left: -50%; }
}

<div class="wrapper click-area">
  <img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
  <img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
  <img class="img animate" src="https://picsum.photos/200/300" />
</div>