Question

我有点卡在动画上，所以我有一个使用jQuery .append()动态添加的div，所以当页面加载时，div内容将被添加并从css I＆＃ll; ll使用@keyframes应用一些动画。我的问题是当使用jQuery .remove()关闭div内容时，因为如果div内容被删除，我将如何应用动画？因此，基本上在页面加载时，内容将从上到下动画，并且在关闭时应该从下到上返回，我该如何进行反向动画？ 我想仅使用css而不是js来应用该反向动画。

.child-container {
  background: red;
  height: 100px;
  width: 150px;
  padding: 10px;
  animation-name: anime;
  animation-duration: 1s;
}

@keyframes anime {
  from,
  0%,
  100%,
  to {
    animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -200px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

＆＃13;

$(document).ready(function() {
  $(".container").append($("<div class='child-container'>Hello Jimmy!<a class='close'><b>X</b></div>"));
  $(".close").on('click', function() {
    $(this).parent().remove();
  });
});

＆＃13;

.container {
  padding: 10px;
  background: orange;
}

.child-container {
  background: red;
  height: 100px;
  width: 150px;
  padding: 10px;
  animation-name: anime;
  animation-duration: 1s;
}

.close {
  float: right;
  cursor: pointer;
}

.close:hover {
  color: #fff;
}


/*ANIMATIONS*/

@keyframes anime {
  from,
  0%,
  100%,
  to {
    animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -200px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

＆＃13;

Answer 1

您必须添加一个类来处理新的状态＆＃34;您在css中的元素。

但你不应该使用动画和关键帧。相反，使用过渡。例如：

.myElement {
    top: 0;
    transition: top 0.4s linear;
}

.meElementOpened {
    top: 50%;
}

我们在元素的默认类（元素必须始终具有的类）上设置转换，以处理top属性上的开始和结束动画。

transition doc

Answer 2

您不需要将keyframes用于此类动画。您应该做的是通过更改top元素的.child-container属性来切换课程并应用transition。

使用initial添加setTimeout类，以便应用该类并进行动画处理。并在关闭时删除该类。请注意，您可以在此处更改transition时间（我在这里提供了1s个时间段。）

更新了fiddle。

参考代码：

$(document).ready(function() {
  $(".container").append($("<div class='child-container'>Hello Jimmy!<a class='close'><b>X</b></div>"));
  setTimeout(function() {
    $(".child-container").addClass("initial");
  }, 1);
  $(".close").on('click', function() {
    $(this).parent().removeClass("initial");
  });
});

.container {
  padding: 10px;
  background: orange;
}

.child-container {
  background: red;
  height: 100px;
  width: 150px;
  padding: 10px;
  top: -200px;
  position: relative;
  transition: all 1s;
}

.initial {
  top: 0;
}

.close {
  float: right;
  cursor: pointer;
}

.close:hover {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

</div>

Answer 3

Bellow片段会在关闭div时显示您打开的确切动画。

＆＃13;

$(document).ready(function() {
  $(".container").append($("<div class='child-container'>Hello Jimmy!<a class='close'><b>X</b></div>"));
  $(".close").on('click', function() {
    $(this).parent().css({
      "animation": "close-anime 1s forwards"
    });
  });
});

＆＃13;

.container {
  padding: 10px;
  background: orange;
}

.child-container {
  background: red;
  height: 100px;
  width: 150px;
  padding: 10px;
  animation-name: anime;
  animation-duration: 1s;
}

.close {
  float: right;
  cursor: pointer;
}

.close:hover {
  color: #fff;
}


/*ANIMATIONS*/

@keyframes anime {
  from,
  0%,
  100%,
  to {
    animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -200px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes close-anime {
  from,
  0%,
  100%,
  to {
    animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, -200px, 0);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

＆＃13;

添加代码：

的 CSS

@keyframes close-anime { from, 0%, 100%, to { animation-timing-function: cubic-bezier(0.25, 0.60, 0.35, 1.00); } 0% { opacity: 0; transform: translate3d(0, 0, 0); } 100% { opacity: 1; transform: translate3d(0, -200px, 0); } }

<强> JS

$(this).parent().css({ "animation": "close-anime 1s forwards" });

仅使用css3删除元素时应用css3动画

3 个答案: