zepto 动画

Posted 2020-10-10 静静的fire

由于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;
}