如何防止在页面加载时运行css关键帧动画？ [英] How to prevent a CSS keyframe animation from running on page load?

问题描述

我有一个div，我在其中为内容制作动画：

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

#container {
  position: relative;
  width: 100px;
  height: 100px;
  border-style: inset;
}
#content {
  visibility: hidden;
  -webkit-animation: animDown 1s ease;
  position: absolute;
  top: 100px;
  width: 100%;
  height: 100%;
  background-color: lightgreen;
}
#container:hover #content {
  -webkit-animation: animUp 1s ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animUp {
  0% {
    -webkit-transform: translateY(0);
    visibility: hidden;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-100%);
    visibility: visible;
    opacity: 1;
  }
}
@-webkit-keyframes animDown {
  0% {
    -webkit-transform: translateY(-100%);
    visibility: visible;
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
    visibility: hidden;
    opacity: 0;
  }
}

<div id="container">
  <div id="content"></div>
</div>

悬停时，内容会滑入容器div。 当我刷新页面并加载页面时，#content的AnimDown动画将运行，我希望它仅在悬停事件之后运行。

有没有办法做到这一点，或者我必须在JS中弄明白一些东西？

http://jsfiddle.net/d0yhve8y/

推荐答案

解决方案1-在第一次悬停时添加向下动画

可能最好的选择是，在用户第一次将鼠标悬停在container上之前，不要打开按下的动画。

这包括侦听mouseover事件，然后在该点添加一个带有动画的类，并删除事件侦听器。它的主要(潜在)缺点是它依赖于Java脚本。

;(function(){
    var c = document.getElementById('container');
    function addAnim() {
        c.classList.add('animated')
        // remove the listener, no longer needed
        c.removeEventListener('mouseover', addAnim);
    };

    // listen to mouseover for the container
    c.addEventListener('mouseover', addAnim);
})();

#container {
    position:relative;
    width:100px;
    height:100px;
    border-style:inset;
}
#content {
    position:absolute;
    top:100px;
    width:100%;
    height:100%;
    background-color:lightgreen;
    opacity:0;
}

/* This gets added on first mouseover */
#container.animated #content {
    -webkit-animation:animDown 1s ease;
}

#container:hover #content {
    -webkit-animation:animUp 1s ease;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes animUp {
    0% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
    100% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
}
@-webkit-keyframes animDown {
    0% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
    100% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
}

<div id="container">
    <div id="content"></div>
</div>

解决方案2-隐藏播放动画

另一种解决方法是最初隐藏元素，确保动画在隐藏时播放，然后使其可见。这样做的缺点是，计时可能会稍有偏差，而且过早地显示出来，而且悬停不能立即使用。

这需要一些等待动画长度的Java脚本，然后才能使#content可见。这意味着您还需要将初始opacity设置为0，以便它不会在加载时出现，并从关键帧中删除visibility-这些关键帧无论如何都不会执行任何操作：

// wait for the animation length, plus a bit, then make the element visible
window.setTimeout(function() {
    document.getElementById('content').style.visibility = 'visible';
}, 1100);

#container {
    position:relative;
    width:100px;
    height:100px;
    border-style:inset;
}

#content {
    visibility:hidden;
    -webkit-animation:animDown 1s ease;
    position:absolute;
    top:100px;
    width:100%;
    height:100%;
    background-color:lightgreen;
    opacity:0;
}

#container:hover #content {
    -webkit-animation:animUp 1s ease;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes animUp {
    0% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
    100% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
}

@-webkit-keyframes animDown {
    0% {
        -webkit-transform:translateY(-100%);
        opacity:1;
    }
    100% {
        -webkit-transform:translateY(0);
        opacity:0;
    }
}

<div id="container">
    <div id="content"></div>
</div>

解决方案3-使用过渡

在您的场景中，您只能通过将keyframe替换为transition来创建此css，因此它以opacity:0开头，只有悬停在opacity和transform：

中有所更改

#container {
    position:relative;
    width:100px;
    height:100px;
    border-style:inset;
}

#content {
    position:absolute;
    top:100px;
    width:100%;
    height:100%;
    background-color:lightgreen;

    /* initial state - hidden */
    opacity:0;
    /* set properties to animate - applies to hover and revert */
    transition:opacity 1s, transform 1s;
}

#container:hover #content {
    /* Just set properties to change - no need to change visibility */
    opacity:1;
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
}

<div id="container">
    <div id="content"></div>
</div>

这篇关于如何防止在页面加载时运行css关键帧动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！