将CSS关键帧动画化回初始状态

Question

我查看过所有答案（question 1,question 2,question 2），但仍无法让我的动画正常工作。我有一个简单的关键帧，它在初始时动画良好，但在切换使用animation-direction: reverse隐藏元素回到关键帧的初始状态的hidden class时不会动画来回。

我想动画元素为translateY(0%)当单击显示按钮时，单击隐藏按钮但animation-timing-function: ease没有适当地应用，因此没有动画时动画回到translateY(-50%)。我也需要为此使用关键帧，因为稍后我将对更复杂的转换进行动画处理。

这里是我有：

$('#show').on('click', function() { 
 
\t $('#slide').removeClass('hidden'); 
 
}); 
 
$('#hide').on('click', function() { 
 
\t $('#slide').addClass('hidden'); 
 
});

#slide { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 200px; 
 
    padding: 20px; 
 
    margin-bottom: 30px; 
 
    display: block; 
 
    animation-iteration-count: 1; 
 
    animation-direction: normal; 
 
    animation-duration: 0.4s; 
 
    animation-delay: 0s; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: both; 
 
} 
 
#slide.animation1 { 
 
    animation-name: slide; 
 
} 
 
#slide.hidden { 
 
    animation-direction: reverse; 
 
} 
 
@keyframes slide { 
 
    0% { 
 
     opacity: 0; 
 
     transform: translateY(-50%); 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
     transform: translateY(0%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide" class="animation1"> 
 
    <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p> 
 
</div> 
 
<button id="show">Show</button> 
 
<button id="hide">Hide</button>

Answer 1

您需要为这2个不同的动画。只是改变方向将不会重新触发动画。

例如：

$('#show').on('click', function() { 
 
\t $('#slide').removeClass('hidden'); 
 
}); 
 
$('#hide').on('click', function() { 
 
\t $('#slide').addClass('hidden'); 
 
});

#slide { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 200px; 
 
    padding: 20px; 
 
    margin-bottom: 30px; 
 
    display: block; 
 
    animation-iteration-count: 1; 
 
    animation-direction: normal; 
 
    animation-duration: 0.4s; 
 
    animation-delay: 0s; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: both; 
 
     opacity: 0; 
 
     transform: translateY(-50%); 
 
} 
 
.animation1 { 
 
    animation-name: slide; 
 
} 
 
#slide.hidden { 
 
    animation-name: slide2; 
 
} 
 
@keyframes slide { 
 
    to { 
 
     opacity: 1; 
 
     transform: translateY(0%); 
 
    } 
 
} 
 
@keyframes slide2 { 
 
    from { 
 
     opacity: 1; 
 
     transform: translateY(0%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide" class="animation1"> 
 
    <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p> 
 
</div> 
 
<button id="show">Show</button> 
 
<button id="hide">Hide</button>

Answer 2

您不必使用@keyframes这一点。你已经使用jQuery插件删除类，所以你也可以使用jQuery来添加一个类的onLoad，然后只用translateY

首先，在默认状态设置translateY(-50%)，负载添加animation1类及类，在CSS中，你设置了translateY(0)。

然后点击hide按钮添加类hidden（就像你现在这样做），并在CSS中只需添加translateY(-50%)。

这将实现你想要的

见下面片段，让我知道，如果这是你在找什么

$(window).on("load", function() { 
 
    $("#slide").addClass("animation1") 
 
    $('#show').on('click', function() { 
 
    $('#slide').removeClass('hidden'); 
 
    }); 
 
    $('#hide').on('click', function() { 
 
    $('#slide').addClass('hidden'); 
 
    }); 
 
});

#slide { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 200px; 
 
    padding: 20px; 
 
    margin-bottom: 30px; 
 
    display: block; 
 
    transform: translateY(-50%); 
 
    transition: 0.3s; 
 
} 
 

 
#slide.animation1 { 
 
    transform: translateY(0%) 
 
} 
 

 
#slide.hidden { 
 
    transform: translateY(-50%) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide" > 
 
    <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p> 
 
</div> 
 
<button id="show">Show</button> 
 
<button id="hide">Hide</button>