Question

我查看了SO答案（question 1，question 2，question 2），但仍无法使我的动画正常工作。我有一个简单的关键帧，它最初动画很好，但在切换使用hidden class animation-direction: reverse以隐藏元素回到关键帧初始状态的translateY(0%)时，不会来回动画。

我想在点击显示按钮时将元素设置为translateY(-50%)动画，并在点击隐藏按钮时动画回animation-timing-function: ease，但$('#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;
  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>

<android.support.design.widget.CoordinatorLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/coordinatorLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_behavior="@string/appbar_scrolling_view_behavior"
  android:fitsSystemWindows="true">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/md_grey_200" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="16dp"
    android:src="@drawable/ic_calendar_icon"
    app:backgroundTint="@color/primary"
    app:elevation="2dp"
    app:fabSize="normal"
    app:layout_anchor="@+id/recycler_view"
    app:layout_anchorGravity="bottom|right|end"
    app:layout_dodgeInsetEdges="right|bottom|top|left"
    app:layout_insetEdge="bottom"
    app:pressedTranslationZ="12dp" />


</android.support.design.widget.CoordinatorLayout>

Answer 1

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

例如：

$('#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;
  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>

将CSS关键帧动画回原始状态

2 个答案: