由于工作需求推掸，要實(shí)現(xiàn)一個(gè)類(lèi)似客服的功能窗口桶蝎，就是界面右下角一個(gè)按鈕驻仅，點(diǎn)了之后彈出一個(gè)窗口，窗口內(nèi)容為外鏈登渣。這些實(shí)現(xiàn)其實(shí)挺容易噪服，首先按鈕固定，窗口也固定胜茧，然后點(diǎn)了按鈕切換顯示和隱藏窗口即可粘优。
實(shí)際開(kāi)發(fā)過(guò)程中碰到的第一個(gè)問(wèn)題，是窗口內(nèi)容的外鏈要如何引用呻顽。查到了兩個(gè)解決方案：
第一個(gè)是用jquery的load方法：
$("#targetId").load("someUrl/templatePage.html");
第二個(gè)是用object標(biāo)簽：
$("#targetId").append("<object type='text/html' data='"+"http://www.baidu.com"+"' style='width:500px;height:500px' id='web-out-from-baidu'></object>");
本著嘗試新東西的態(tài)度雹顺，選擇了第二種。于是簡(jiǎn)單的功能完成了廊遍。但是測(cè)試后發(fā)現(xiàn)无拗，每次顯示object標(biāo)簽中的頁(yè)面都會(huì)重新加載，不能保存歷史記錄昧碉，于是開(kāi)始想解決方案，由于object相關(guān)的內(nèi)容千篇一律又無(wú)法解決我的問(wèn)題揽惹，所以最后改為了Iframe被饿。
到這里，基本功能算是完成了搪搏，關(guān)于object的問(wèn)題狭握，還是無(wú)解。
想到之前畢設(shè)的時(shí)候?qū)崿F(xiàn)過(guò)類(lèi)似的消息提醒疯溺，有些動(dòng)態(tài)效果论颅，于是又想做些改進(jìn)，改成類(lèi)似ppt從下往上進(jìn)入界面和從上往下移出界面的特效囱嫩，之前是怎么實(shí)現(xiàn)的已經(jīng)不記得了恃疯，這次想用css3的動(dòng)畫(huà)，但是有點(diǎn)沒(méi)有頭緒墨闲。于是跟著w3c走了一下今妄，看到有js里使用的transform，就copy過(guò)來(lái)試了一下鸳碧，發(fā)現(xiàn)和隱藏顯示的效果完全一樣盾鳞，根本不會(huì)動(dòng)不會(huì)動(dòng)不會(huì)動(dòng)。（期間還查了怎么獲取元素的屬性瞻离，尷尬腾仅。）原來(lái)transform只是變形，沒(méi)有動(dòng)態(tài)效果套利。于是用上了animation推励，并不知道應(yīng)該怎么觸發(fā)鹤耍，所以學(xué)習(xí)了keyframes，finally窗口會(huì)動(dòng)了吹艇，but動(dòng)完又回到了初始狀態(tài)惰蜜，what？查了下發(fā)現(xiàn)animation有個(gè)屬性叫animation-fill-mode受神，設(shè)為towards即可固定在最后一刻抛猖。于是最終的實(shí)現(xiàn)如下：（最后會(huì)有demo展示）
雖說(shuō)過(guò)程實(shí)在是拖得格外的長(zhǎng)，但是最終還是實(shí)現(xiàn)了鼻听，這樣實(shí)際使用碰到問(wèn)題再去查確實(shí)比只看一堆教程要有效的多财著。
總結(jié)如下
css3動(dòng)畫(huà)常見(jiàn)的屬性為transition，transform撑碴，translate撑教，animation。
transform是變形醉拓，和color一樣只是單獨(dú)改變外表伟姐，并不涉及動(dòng)畫(huà)。
translate是移動(dòng)亿卤。
真正涉及動(dòng)畫(huà)的是transition和animation愤兵。transition是屬性的過(guò)渡，只有兩個(gè)狀態(tài)排吴，開(kāi)始和結(jié)束秆乳，而animation可以有多個(gè)狀態(tài)，相當(dāng)于多個(gè)transition的疊加钻哩。
demo如下
<html>
<head>
<title>彈出框客服</title>
<style>
.robotBtnWrap {
position:fixed;
z-index:1;
bottom:10px;
right:0px;
width:120px;
height:60px;
}
.dialogSector {
width:500px;
height: 500px;
position: fixed;
bottom:-500px;
right:0px;
}
.robotHeader {
background-color:rgb(55,130,188);
height:30px;
color: #fff;
}
.btnClose {
margin: 10px 8px 0px;
position: relative;
cursor: pointer;
float: right;
height: 16px;
width: 16px;
font-family: Verdana !important;
font-size: 8px !important;"
}
@keyframes dialogShow {
from{bottom:-500px;}
to{bottom:0px;}
}
@keyframes dialogHide {
from{bottom:0px;}
to{bottom:-500px;}
}
@keyframes btnShow {
from{right:-120px;}
to{right:0px;}
}
@keyframes btnHide {
from{right:0px;}
to{right:-120px;}
}
</style>
</head>
<body>
<div id="robotBtn" class="robotBtnWrap" data-status="show">
<button class="btn" onclick="showDialog();">客服咨詢(xún)</button>
</div>
<div class="dialogSector" id="robotDialog" data-status="hide">
<div class="robotHeader">
<span style="width:10px;display:inline-block;"></span>
<span style="font-size:13px;height:30px;line-height:30px;color:#fff;">客服</span>
<span id="robotClose" class="btnClose" onclick="closeDialog();">×</span>
</div>
<iframe name="robotFrame" id="robotFrame" border="0"
frameborder="no" noresize="noresize" width="100%" height="100%"
scrolling="auto" src="https://www.baidu.com/" style="height:100%;overflow-y:hidden;"></iframe>
</div>
<script>
function showDialog() {
robotBtnToggle();
robotToggle();
}
function closeDialog() {
robotToggle();
robotBtnToggle();
}
function robotBtnToggle() {
var btnr = document.getElementById("robotBtn");
if(btnr.dataset.status === "hide") {
btnr.style.animation = "btnShow 1s";
btnr.style.animationFillMode = "forwards";
btnr.setAttribute("data-status","show");
} else {
btnr.style.animation = "btnHide 1s";
btnr.style.animationFillMode = "forwards";
btnr.setAttribute("data-status","hide");
}
}
function robotToggle() {
var dgr = document.getElementById("robotDialog");
if(dgr.dataset.status === "hide") {
dgr.style.animation = "dialogShow 1s";
dgr.style.animationFillMode = "forwards";
dgr.setAttribute("data-status","show");
} else {
dgr.style.animation = "dialogHide 1s";
dgr.style.animationFillMode = "forwards";
dgr.setAttribute("data-status","hide");
}
}
</script>
</body>
</html>
