由于工作需求，要实现一个类似客服的功能窗口，就是界面右下角一个按钮，点了之后弹出一个窗口，窗口内容为外链。这些实现其实挺容易，首先按钮固定，窗口也固定，然后点了按钮切换显示和隐藏窗口即可。
实际开发过程中碰到的第一个问题，是窗口内容的外链要如何引用。查到了两个解决方案：
第一个是用jquery的load方法：
$("#targetId").load("someUrl/templatePage.html");
第二个是用object标签：
$("#targetId").append("<object type='text/html' data='"+"http://www.baidu.com"+"' style='width:500px;height:500px' id='web-out-from-baidu'></object>");
本着尝试新东西的态度，选择了第二种。于是简单的功能完成了。但是测试后发现，每次显示object标签中的页面都会重新加载，不能保存历史记录，于是开始想解决方案，由于object相关的内容千篇一律又无法解决我的问题，所以最后改为了Iframe。
到这里，基本功能算是完成了，关于object的问题，还是无解。
想到之前毕设的时候实现过类似的消息提醒，有些动态效果，于是又想做些改进，改成类似ppt从下往上进入界面和从上往下移出界面的特效，之前是怎么实现的已经不记得了，这次想用css3的动画，但是有点没有头绪。于是跟着w3c走了一下，看到有js里使用的transform，就copy过来试了一下，发现和隐藏显示的效果完全一样，根本不会动不会动不会动。（期间还查了怎么获取元素的属性，尴尬。）原来transform只是变形，没有动态效果。于是用上了animation，并不知道应该怎么触发，所以学习了keyframes，finally窗口会动了，but动完又回到了初始状态，what？查了下发现animation有个属性叫animation-fill-mode，设为towards即可固定在最后一刻。于是最终的实现如下：（最后会有demo展示）
image
虽说过程实在是拖得格外的长，但是最终还是实现了，这样实际使用碰到问题再去查确实比只看一堆教程要有效的多。
总结如下
css3动画常见的属性为transition，transform，translate，animation。
transform是变形，和color一样只是单独改变外表，并不涉及动画。
translate是移动。
真正涉及动画的是transition和animation。transition是属性的过渡，只有两个状态，开始和结束，而animation可以有多个状态，相当于多个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();">客服咨询</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>
网友评论