Question

因此，我正在使用animate.css库中的@keyframe设置。基本上，我使用的动画从opacity: 0到opacity: 1，并经过了一些cubic-bezier和scale的转换。

我使用它的方式是有一个按钮，单击该按钮时会切换状态，并在想要动画效果的元素上添加一个类（.is-active）。 CSS是这样的：

.bounce-in-div {
    position: absolute;
    top: -25px;
    pointer-events: none;
    opacity: 0;

    &.is-active {                               
        pointer-events: all;    
        animation: bounceIn; 
        animation-duration: 0.6s;
        animation-delay: 0.6s;

HTML / JS是这样的：

<a (click)="toggleState = !toggleState">Click me</a>

<div class="bounce-in-div" [ngClass]="toggleState ? 'is-active' : ''">
    Some content
</div>

这里的窍门是我在动画上有一个延迟，所以单击动画后只有0.6s会发生。

因此，当前将发生的情况是bounce-in-div被隐藏，然后单击，动画发生，然后返回到opacity: 0，因为这是最初的状态，并且只能通过动画进行更改，而不能在.is-active类本身中进行更改。因此它基本上消失了。另一方面，如果我给.is-active类一个opacity: 1，它会出现在动画之前，然后进行动画处理-这样看起来很奇怪。

另一方面，如果我将transition-delay: 0.6s放到一切正常，但这也意味着如果我要对div进行某些悬停效果，则此过渡延迟也会添加到该悬停效果上。 / p>

因此，例如CSS可能如下所示：

.bounce-in-div {
    position: absolute;
    top: -25px;
    pointer-events: none;
    opacity: 0;

    &.is-active {                               
        pointer-events: all;    
        animation: bounceIn; 
        animation-duration: 0.6s;
        animation-delay: 0.6s;
        transition-delay: 0.6s;

    &:hover {
        opacity: 0.5;

同样，如果我这样做，则悬停效果在鼠标悬停时会很好，但是在鼠标悬停时，它将使transition-delay: 0.6s使过渡变慢。

因此，基本上，有什么方法可以使动画的不透明度“覆盖”原始的不透明度0，从而实际上是在改变不透明度，而不是直接的不透明度。

或者我可以用其他方式解决这个问题吗？

动画以覆盖不透明度？

0 个答案: