Question

因此，对于以下代码，我有一个循环通知，可以动画，向左打开并显示信息和个人资料图像。我希望能够通过使圆圈向前覆盖信息并淡出（我已经输入）来反转动画。但是，我不确定如何实现这一点。我尝试了几种方法，比如切换动画，但似乎没有用。有什么建议吗？

您可以单击“关闭我”按钮关闭通知，然后单击“打开我”以打开它。

$(document).ready(function() {
  $(".open").click(function(e) {
    $(".pgn-wrapper").fadeIn(250);
  });

  $(".close").click(function(e) {
    $(".pgn-wrapper").fadeOut(500);
  });
});

/* Circle Animation
------------------------------------
*/
.pgn-circle .alert {
  border-radius: 300px;
  animation: fadeInCircle 0.3s ease forwards,
    resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
  -webkit-animation: fadeInCircle 0.3s ease forwards,
    resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
  height: 50px;
  overflow: hidden;
  padding: 6px 55px 6px 6px;
  -webkit-transform: translateZ(0);
  position: relative;
}

.pgn-wrapper[data-position$='-right'] .pgn-circle .alert {
  float: right;
}

.pgn-wrapper[data-position$='-left'] .pgn-circle .alert {
  float: left;
}

.pgn-circle .alert > div > div.pgn-thumbnail > div {
  border-radius: 50%;
  overflow: hidden;
  width: 48px;
  height: 48px;
}

.pgn-circle .alert > div > div.pgn-thumbnail > div > img {
  width: 100%;
  height: 100%;
}

.pgn-circle .alert > div > div.pgn-message > div {
  opacity: 0;
  height: 47px;
  padding-left: 9px;
  animation: fadeIn .3s .5s ease forwards;
  -webkit-animation: fadeIn .3s .5s ease forwards;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word;
}

.pgn-circle .alert > div > div.pgn-message > div p:only-child {
  padding: 12px 0;
}

.pgn-circle .alert .close {
  margin-top: -12px;
  position: absolute;
  right: 18px;
  top: 50%;
  opacity: 0;
  animation: fadeIn .3s .5s ease forwards;
  -webkit-animation: fadeIn .3s .5s ease forwards;
}

.pgn-circle .alert p {
  margin-bottom: 0;
}

.pgn-circle .alert > div {
  display: table;
  height: 100%;
}

.pgn-circle .alert > div > div {
  display: table-cell;
  vertical-align: middle;
}

@keyframes fadeInCircle {
  0% {
    opacity: 0;
    width: 60px;
  }

  100% {
    opacity: 1;
    width: 60px;
  }
}

@-webkit-keyframes fadeInCircle {
  0% {
    opacity: 0;
    width: 60px;
  }

  100% {
    opacity: 1;
    width: 60px;
  }
}

@keyframes resizeCircle {
  0% {
    width: 60px;
  }

  100% {
    width: 300px;
  }
}

@-webkit-keyframes resizeCircle {
  0% {
    width: 60px;
  }

  100% {
    width: 300px;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.close:target {
  animation: resizeCircle2 1s all;
  animation-direction: alternate;
}
@keyframes resizeCircle2 {
  0% {
    width: 300px;
  }

  100% {
    width: 60px;
  }
}



/* Headings 
------------------------------------
*/
p {
  display: block;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.01em;
  line-height: 22px;
  margin: 0px 0px 10px 0px;
  font-style: normal;
  white-space: normal;
}

.bold {
  font-weight: bold !important;
}
/* Alert 
------------------------------------
*/
.alert {
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  padding: 9px 19px 9px 15px;
  border-radius: 3px;
  font-size: 13px;
  border-width: 0;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.alert-danger, .alert-error {
  background-color: #c42827;
  color: white;
  border-color: #933432;
}

.alert-danger .close, .alert-error .close {
  background-position: -95px -10px !important;
}
/*------------------------------------------------------------------
Notifications
--------------------------------------------------
*/

.pgn-wrapper[data-position='top'] {
  top: 0;
  left: 0;
  right: 0;
}

.pgn {
  position: relative;
  margin: 10px;
}

.pgn .alert {
  margin: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<div class="pgn-wrapper" data-position="top-right">
  <div class="pgn push-on-sidebar-open pgn-circle">
    <div class="alert alert-danger">
      <div>
        <div class="pgn-thumbnail">
          <div>
            <img width="40" height="40" style="display: inline-block;" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
          </div>
        </div>
        <div class="pgn-message">
          <div>
            <p class="bold" style="color:white">John Doe</p>
            <p>Logging out in <b>60</b> second(s).</p>
          </div>
        </div>
      </div>
     </div>
  </div>
</div>
<a class="open" href="#">OPEN ME</a>
<a class="close" href="#">CLOSE ME</a>

<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

嗯，你已经获得了大量的代码而且我没有解析所有代码，但我可以说当你有这样的动画时：

element:hover {
  animation:resizeCircle 1s all;
}

您指示宽度应该从哪里开始和结束以便反转，您要确保此动画与临时状态相关联，例如使用这样的选择器悬停：

@keyframes resizeCircle2 {
    0% {
        width: 300px;
    }

    100% {
        width: 60px;
    }
}

然后，动画将仅在元素悬停时应用，并且当元素不会动画回原始状态时。

或者，您可以设置一个单独的动画来指定反向属性值：

element:target {
  animation:resizeCircle2 1s all;
}

并将其应用于＆＃34;触发器＆＃34;选择器，例如：

if

当元素是点击的目标时，（在这种情况下）会应用反向动画。

Answer 2

以下是一个例子：

class DownloadFile : NSObject {

    static var number = 1
    init(url : String) {
        ...
        DownloadFile.number += 1
        ...
    }
}

您可以在此处进行操作：https://plnkr.co/edit/wa5Ny6vmluJv6xeDs7qt?p=preview

如何在CSS中进行反向动画？

2 个答案: