Question

我有一个容器div，里面有一个图像。当用户单击图像时，我希望它增长以填充视口宽度。这对我有用，但我希望它随着它的增长而平滑地动画，但事实并非如此。

如何让图像从页面中心平滑地生长，而不是 in situ ，直到它触及视口的右边缘，然后向左跳并继续直到它填充视口？

这是一个例子（你可以在codepen上试试）：

HTML：

<div>
  <img id="expandableImage" src="https://placekitten.com/g/500/200">
</div>

CSS：

div {
  width: 50%;
  margin: 0 auto;
}

img {
  width: 100%;
  cursor: pointer;
  position: relative;
}

.fullsize {
  animation-duration: 1s;
  animation-name: zoom-in;
  animation-fill-mode: forwards; 
}
.smallsize {
  animation-duration: 1s;
  animation-name: zoom-out;
}

@keyframes zoom-in {
  to {
    width: 100vw;
      position: relative;
      left: calc(-50vw + 50%);  
  }
}

@keyframes zoom-out {
  to {
    width: 100%;
  }
  from {
    width: 100vw;
      position: relative;
      left: calc(-50vw + 50%);
  }
}

JS：

document.getElementById( "expandableImage" ).addEventListener( "click", zoom );

function zoom() {
        if (this.className.indexOf("fullsize") > -1) {
            this.className = this.className.replace(" fullsize", "");
            this.className = this.className + " smallsize";
        } else {
            this.className = this.className.replace(" smallsize", "");
            this.className = this.className + " fullsize";
        }
    }

Answer 1

这是你在找什么？

http://codepen.io/anon/pen/ZGLKwB

img {
  width: 100%;
  cursor: pointer;
  position: relative;
  transform:translateX(-50%);
  left:50%;
}

Answer 2

您不需要@keyframes，只有transition就足够了。

http://jsfiddle.net/xnmojeyn/

＆＃13;

document.getElementById("expandableImage").addEventListener("click", zoom);

function zoom() {
    if (this.className.indexOf("fullsize") > -1) {
        this.className = this.className.replace(" fullsize", "");
        this.className = this.className + " smallsize";
    } else {
        this.className = this.className.replace(" smallsize", "");
        this.className = this.className + " fullsize";
    }
}

＆＃13;

body, p {
    margin: 0;
}
div {
    width: 50vw;
    height: 100vh;
    margin: 0 auto;
    background-color: lightblue;
}
img {
    width: 100%;
    cursor: pointer;
}
.fullsize {
    transition: all 1s;
    margin-left: -25vw;
    width: 100vw;
}
.smallsize {
    transition: all 1s;
    width: 100%;
}

＆＃13;

<div>
    <p>asdf</p>
    <img id="expandableImage" src="https://placekitten.com/g/500/200" />
    <p>Why it doesn't work</p>
</div>

＆＃13;

Answer 3

问题SELECT b.batchname FROM batch b JOIN batchdetail d ON d.batchid = b.batchid AND d.subtechid IN (1,2) WHERE b.techid = 1 GROUP BY b.batchid HAVING COUNT(DISTINCT d.subtechid) = 2 ORDER BY b.batchname

calc

}

http://jsbin.com/paxuketigu/2/

浮动的另一个例子：左

http://jsbin.com/paxuketigu/3/

如何在图像从容器宽度增长到完整视口宽度时为其设置动画效果？

3 个答案: