<div v-if="show" :transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS
/* 必需 */
.expand-transition {
transition: all .3s ease
height: 30px
padding: 10px
background-color: #eee
overflow: hidden
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0
padding: 0 10px
opacity: 0
}
你可以在同一元素上通过动态绑定实现不同的过渡:
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
})
ios上plus是一直存在的,不涉及等ready事件。但安卓上还是需要等plus ready。在安卓环境中,通常情况下需要html页面解析完成后才会让5+ API生效,安卓的执行的顺序为:
1. 加载html页面,loading
2. 解析html页面(解析title节点、下载script/link等节点引用的资源,如js/css文件)
3. 触发DOMContentLoaded事件
4. 触发plusready事件
此文对执行顺序有详细描述:http://ask.dcloud.net.cn/article/571
我们总是在不停追求性能优化,生效时间越早,我们可以把app的体验做的更好。
在HBuilder7.5版本之后安卓版支持提前注入5+ API,可以在plusready事件触发之前调用5+ API, *** 作方法是在页面中添加以下节点:
<script src="html5plus://ready"></script>,示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>HTML5+ API</title>
<script src="html5plus://ready"></script>
<script type="text/javascript" charset="utf-8">
// 这里可以调用5+ API了,为了更好的兼容性,应该使用以下代码进行判断
if(window.plus){
// 在这里调用5+ API
}else{// 兼容老版本的plusready事件
document.addEventListener('plusready',function () {
// 在这里调用5+ API
},false)
}
</script>
</head>
<body>
Hello HTML5 plus
首先在<head>和</head>中加入以下代码:<script language=javascript>
<!--
function redirectPage(){
var url800x600=〃index-ie.html〃//定义两个页面,此处假设index-ex.html和1024-ie.html同change-ie.html在同一个目录下
var url1024x768=〃1024-ie.html〃
if ((screen.width==800) && (screen.height==600)) //在此处添加screen.width、screen.height的值可以检测更多的分辨率
window.location.href= url800x600
else if ((screen.width==1024) && (screen.height==768))
window.location.href=url1024x768
else window.location.href=url800x600
}
然后再在<body…>内加入onLoad=〃redirectPage()〃
最后,同样地,在<body>和</body>之间加入以下代码来显示网页的工作信息:
<script language=javascript>
<!--
var w=screen.width
var h=screen.height
document.write(〃系统已检测到您的分辨率为:〃)
document.write(〃<font size=3 color=red>〃)
document.write(w+〃×〃+h)
document.write(〃</font>〃)
document.write(〃正在进入页面转换,请稍候…〃)
// -->
</script>
=========================================================
建议方法,让窗口居中.在你做的网页最外面加个DIV,设置body属性,文本居中.或者把数值换成比例.
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)