CSS3 animate pop, flow下的弹框与回收站交互效果实例页面

展示

代码

CSS代码：

/* Copyright (c) 2012 Dan Eden */
.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
}

@-webkit-keyframes tada {
    0% {-webkit-transform: scale(1);}    
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
    100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
    0% {-moz-transform: scale(1);}    
    10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
    100% {-moz-transform: scale(1) rotate(0);}
}

.tada {
    -webkit-animation-name: tada;
    -moz-animation-name: tada;
}
            

HTML代码：

<span class="image"><img id="image" class="flow" src="//image.zhangxinxu.com/image/study/s/s512/mm1.jpg" /></span>
<img id="recycle" class="recycle animated" src="//image.zhangxinxu.com/image/blog/201210/huishou.png" />
<p><input type="button" id="button" class="button" value="放入垃圾箱" /></p> 

<!-- 确定移除的提示框 -->
<div id="confirm" class="confirm pop reverse out">
    <div class="confirm_bar">
    	<a href="javascript:" id="close" class="confirm_close">×</a>
        提示框
    </div>
    <div class="confirm_body">
    	<p>您确定将该图片移入回收站？</p>
        <p>
            <button id="ensure" type="button">确定</button>
            <button id="cancel" type="button">取消</button>
        </p>
    </div>
</div>
            

JS代码：

// 浮动提示框的元素们
var eleConfirm = $("#confirm"), eleClose = $("#close");
// 图片和回收站元素
var eleImage = $("#image"), eleRecycle = $("#recycle");
// 弹框关闭的方法
var funConfirmOut = function() { eleConfirm.addClass("reverse out").removeClass("in"); }
// 点击弹框右上角的关闭和取消按钮
$("#close, #cancel").bind("click", funConfirmOut);
// 点击确定按钮按钮
$("#ensure").bind("click", function() {
    eleImage.addClass("out reverse").removeClass("in");
    setTimeout(function() {
        eleImage.css("visibility", "hidden");
        eleRecycle.addClass("tada");    
        setTimeout(function() { eleRecycle.removeClass("tada"); }, 1000);
    }, 300);
    funConfirmOut();
});
// 点击垃圾箱
eleRecycle.bind("click", function() {
    eleImage.css("visibility", "visible").removeClass("out reverse").addClass("in");        
});

// 点击移除图片按钮，出现提示框
$("#button").bind("click", function() {
    var scrollTop = $(document.body).scrollTop();
    if (!eleImage.hasClass("out")) {
        eleConfirm.css({
            top: scrollTop + ($(window).height() - eleConfirm.height()) / 2
        }).removeClass("reverse out").addClass("in");
    } else {
        eleRecycle.addClass("tada");
        setTimeout(function() { eleRecycle.removeClass("tada"); }, 1000);    
    }
});