因此,对于以下代码,我有一个循环通知,可以动画,向左打开并显示信息和个人资料图像。我希望能够通过使圆圈向前覆盖信息并淡出(我已经输入)来反转动画。但是,我不确定如何实现这一点。我尝试了几种方法,比如切换动画,但似乎没有用。有什么建议吗?
您可以单击“关闭我”按钮关闭通知,然后单击“打开我”以打开它。
$(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>
答案 0 :(得分:1)
嗯,你已经获得了大量的代码而且我没有解析所有代码,但我可以说当你有这样的动画时:
element:hover {
animation:resizeCircle 1s all;
}
您指示宽度应该从哪里开始和结束以便反转,您要确保此动画与临时状态相关联,例如使用这样的选择器悬停:
@keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
然后,动画将仅在元素悬停时应用,并且当元素不会动画回原始状态时。
或者,您可以设置一个单独的动画来指定反向属性值:
element:target {
animation:resizeCircle2 1s all;
}
并将其应用于&#34;触发器&#34;选择器,例如:
if
当元素是点击的目标时,(在这种情况下)会应用反向动画。
答案 1 :(得分:0)
以下是一个例子:
class DownloadFile : NSObject {
static var number = 1
init(url : String) {
...
DownloadFile.number += 1
...
}
}
您可以在此处进行操作:https://plnkr.co/edit/wa5Ny6vmluJv6xeDs7qt?p=preview