我正在尝试使 html 中的效果看起来像在 android 中从上到下拉动标题栏的效果。
有人知道怎么做吗?或者我需要什么工具?
当我滑动时,页面只显示跟随动画但不跟随我的手指
我是新手。请帮助我。
感谢阅读!!!
这是我尝试的 CSS:
.myanimation {
animation : mymove .3s linear;
-webkit-animation : mymove .3s linear;
}
.removeanimation {
animation : remove .3s linear;
-webkit-animation : remove .3s linear;
}
@keyframes mymove
{
0% {width: 20%;}
25% {width: 40%;}
50% {width: 60%;}
75% {width: 80%;}
100% {width: 100%;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0% {width: 20%;}
25% {width: 40%;}
50% {width: 60%;}
75% {width: 80%;}
100% {width: 100%;}
}
@keyframes remove
{
0% {width: 100%;}
25% {width: 80%;}
50% {width: 60%;}
75% {width: 40%;}
100% {width: 20%;}
}
@-webkit-keyframes remove /*Safari and Chrome*/
{
0% {width: 100%;}
25% {width: 80%;}
50% {width: 60%;}
75% {width: 40%;}
100% {width: 20%;}
}
这是 javascript(我使用 hammer.js):
$(".play").hammer().on("swiperight", function (event) {
$('#mainSetting').removeClass('hide');
$('#mainSetting').removeClass('removeanimation');
$('#mainSetting').addClass('myanimation');
$('#mainSetting').css("width","100%");
});
$("#mainSetting").hammer().on("swipeleft", function(event) {
$('#mainSetting').removeClass('myanimation');
$('#mainSetting').addClass('removeanimation');
$('#mainSetting').css("width","10%");
setTimeout(function(){$('#mainSetting').addClass('hide')},400);
});
最佳答案
尚未测试,但结合 fiddle ,您可以简单地将用于打开和关闭点击的 jQuery 替换为 hammer.js 实现。它会是这样的:
var animate = $('.animate');
var hammeropen = Hammer(element).on("swipedown", function(event) {
$('animate').addClass('open');
});
var hammerclose = Hammer(element).on("swipeup", function(event) {
$('animate').removeClass('open');
});
至少根据 hammer.js 文档。
对于 CSS,您只需要为您想要的元素使用它,就像从上向下滑动的 android 顶部栏一样:
.animate {
position:fixed;
left:0;
right:0;
background:#333;
top:0;
bottom:90%;
max-height:20px;
transition:all 0.5s ease;
z-index:2;
text-align:center;
color:#fff;
}
.animate.open {
bottom:0;
max-height:100%;
}
关于javascript - 如何使效果从上到下1页像android标题栏一样使用css3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17875694/