码迷,mamicode.com
首页 > 其他好文 > 详细

zepto 动画

时间:2017-10-14 15:00:58      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:nbsp   pos   改变   city   win   bsp   设置   zepto   function   

由于zepto的 show hide 不提供动画效果

另谋出路 第一想到的就是css3

可以改变透明度可以实现动画效果 

但是存在问题 虽然看不见了 但是元素实际上还在改位置 是会触发各种事件的

解决方法 让元素离开改位置 也就是添加位置的改变

设置负的方向值就行 同时也能继承动画效果

实际效果 没有单改变透明度效果好

$this.scroll(function () {
if ($this.scrollTop() >= (winheight - offtop)) {
$(‘.goup‘).css({‘opacity‘:.5,‘bottom‘:40+‘px‘});
}else if($this.scrollTop() <= (winheight - offtop)){
$(‘.goup‘).css({‘opacity‘:.5,‘bottom‘:-40+‘px‘});
}
});

.goup{
position: fixed;
right: 20px;
bottom: -40px;
width: 30px;
height: 30px;
opacity: 0;
border-radius: 50%;
-webkit-transition: all .6s;
}

zepto 动画

标签:nbsp   pos   改变   city   win   bsp   设置   zepto   function   

原文地址:http://www.cnblogs.com/-maomao-/p/7666843.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!