发现修复，请勿回复

Question

发现修复，请勿回复

所以我让我的图像一次放大一个。我的徽标工作正常，但是当我尝试做一些我的图标时，它们会被拉伸，在第一个动画中，所有这些都开始加载。它显示在JSFiddle中。

HTML：

export default {
  mounted() {
    if(this.isLast) {
        this.$emit('update');
    }
}

JSFiddle（图片仅为改编而改变）

Answer 1

你有一些问题。

1）默认情况下，DOM元素上的CSS动画开始/结束状态不会持久存在。这意味着你的对象将完全按照编码的方式运行，直到动画运行，然后动画生效，然后它返回到原始状态。

要解决此问题，您需要在图片上使用css属性animation-fill-mode。您可以将其设置为none（默认值），backwards（动画的起始帧是动画运行前的外观），forwards（动画的最后一帧是外观）在动画运行之后）或both（外观由'0％'动画状态决定，直到动画运行，动画运行，然后其外观由'100％'动画状态决定）。

2）您的动画为100%处的图像设置height:100%; width:100%;状态。这意味着当动画运行时，它会根据容器元素的高度（width:100%将图像的大小设置为容器元素的宽度（height:100%），在这种情况下会被忽略，因为容器没有' t有明确的高度）。这就是为什么图像在动画中如此伸展的原因。

要解决此问题，您需要将100%状态的宽度和高度属性设置为inherit（height:inherit; width:inherit;），以便它们获取其他规则或图像的宽度和高度自然尺寸，而不是试图拉伸以匹配容器。

查看更新的代码：

@keyframes zoomin {
    0% { height: 0; width: 0; /*margin: 45% 45%;*/ }
    100% { height: inherit; width: inherit; /*margin: 0% 0%;*/ }
}

#logo {
    margin-top: -350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#logo img {
    width: 398px;
    height: 391px;
    animation: pulse 1s linear infinite;
    animation: zoomin 0.7s ease-in;
}

.main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 100px;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
}

#main-links {
    position: absolute;
    width: 873px;
    height: 205px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -90px;
}

#main-links img {
    width: 200px;
    height: 200px;
    margin-left: 20px;
    animation-fill-mode: backwards;
}

#img-1 {
    animation: zoomin 0.7s ease-in;
    animation-delay: 0.7s;
}

#img-2 {
    animation: zoomin 0.7s ease-in;
    animation-delay: 1.4s;
}

#img-3 {
    animation: zoomin 0.7s ease-in;
    animation-delay: 2.1s;
}

#img-4 {
    animation: zoomin 0.7s ease-in;
    animation-delay: 2.8s;
}

<div class="main">
        <div id="logo"><img src="https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png" /></div>
        <div id="main-links">
            <a><img id="img-1" style="margin-left: 0" src="https://openclipart.org/image/800px/svg_to_png/130729/Awesome-template.png" /></a>
            <a><img id="img-2" src="https://openclipart.org/image/800px/svg_to_png/130729/Awesome-template.png"/></a>
            <a><img id="img-3" src="https://openclipart.org/image/800px/svg_to_png/130729/Awesome-template.png"/></a>
            <a><img id="img-4" src="https://openclipart.org/image/800px/svg_to_png/130729/Awesome-template.png" /></a>
        </div>
    </div>

另外，如果你想知道为什么第一张图像会向下和向右成长，而其他三张图像长大后向右，那是因为图像从文本基线开始增长。第一个似乎长大了，因为文本基线实际上是降低以适应图像的高度。然而，在建立文本基线之后，其他三个图像从基线开始增长。

如果您希望它们从顶部向下长大，您需要将图像的垂直对齐方式更改为vertical-align:top，它们都会向下和向右增长。

此外，你可以选择让它们从底部长大，而不是增加父容器的行高（在这种情况下为#main-links）以匹配全尺寸图像的高度

我尝试了line-height:200px，第一张图片一直长到一半，然后继续向下。我不确定为什么会这样;我的猜测是line-height没有直接转换到高度。通过将line-height值增加到400px，它们都从底部长大。（见fiddle。）

CSS动画表现得很奇怪

发现修复，请勿回复

1 个答案: