如何在详细信息标记的结束事件上添加CSS转换？

After reading those two questions:

看完这两个问题后:

How To Add CSS3 Transition With HTML5 details/summary tag reveal?

如何添加CSS3转换HTML5详细信息/摘要标记显示?

How to make <'details'> drop down on mouse hover

如何使<'详细信息'>下拉鼠标悬停

I have a new one for you!

我有一个新的给你!

Problem

I want an animation on closing event of the <details> tag. I thought that just revert the animation of opening would do the job, but unfortunately, no.

我希望在

标签的结束事件上播放动画。我认为只要恢复开放的动画就可以完成这项工作,但不幸的是,没有。

$(function() {
  $('details').on('mouseover', function() {
    $(this).attr('open', true);
  }).on('mouseout', function() {
    $(this).attr('open', false);
  }).on('click', function(e) {
    e.preventDefault();
  })
});

details[open] SUMMARY~* {
  animation: sweepin .5s ease-in-out;
}

details[close] SUMMARY~* {
  animation: sweepout .5s ease-in-out;
}

@keyframes sweepin {
  0% {
    opacity: 0;
    margin-left: -10px
  }
  100% {
    opacity: 1;
    margin-left: 0px
  }
}

@keyframes sweepout {
  0% {
    opacity: 1;
    margin-left: 0px
  }
  100% {
    opacity: 0;
    margin-left: -10px
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<details>
  <summary>Here my little summary</summary>
  <p>... Do you want more details?</p>
  <p>Here have some details!</p>
</details>

更多相关文章

随机推荐