关于zepto animate 给div 为position absoulte的设置动画，滑动一下才显示的bug解决

最新推荐文章于 2020-02-03 15:52:57 发布

chiyi6447

最新推荐文章于 2020-02-03 15:52:57 发布

阅读量146

点赞数

原文链接：https://my.oschina.net/u/1774253/blog/1377440

版权

div是从屏幕外边进入到屏幕中，所以初始时候元素会隐藏，这个时候不能用translate初始化元素位置

要用padding-left，不能用left或者marginleft，ios会出现这个问题，安卓不会

转载于:https://my.oschina.net/u/1774253/blog/1377440

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chiyi6447

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

zepto手机页面滑动及页面动画特效.rar

10-24

通过css3以及jquery所写的手机页面动画效果，包括页面上下左右四个方向的滑动以及页面内部的动画效果。

Jquery中使用show()与hide()方法动画显示和隐藏图片

10-23

以前我们在js中如果要隐藏显示一个元素我们需要利用display等于none来设置并且还没有效果，现在在jquery中有了hide();我们可以利用hide()方法来操作，希望本文章给大家所有帮助。

参与评论您还未登录，请先登录后发表或查看评论

zepto中animate的用法

kongjiea笔记

08-13

6万+

$this_bd.animate({height:iTthis_bd_h+'px',complete:siblingsUp()},700); function siblingsUp(){ $this_bd.siblings('.bd').animate({height:'0px'},50); };

解决transition第一次不生效问题和fixed的transform定位问题

qq_39537116的博客

01-07

8885

left设置初始值,设置初始transition; 如果设置fixed元素的父级或祖先级元素设置为transform属性，则fixed相对于该元素定位。因为设置transform属性的元素建立了一个新的坐标系 ...如果要通过fixed实现铺满全屏的效果，一定要注意其父级或祖先级元素不能设置有transform属性...

animate动画在zepto.js框架中无法使用的解决方法

bocaidada的博客

10-09

2023

Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库，简单来讲，zepto就是一个专为移动端而生的精简版jquery框架，语法和jquery几乎一模一样；可是在实际应用中你可能会发现jquery中使用频率非常高的animate动画方法在zepto中无法使用。其实zepto是支持的，只不过没有集成到zepto核心文件中，需要大家在引入Zepto.js之后在引入官方提供的fx.js扩...

zepto.js插件适用于微信等移动浏览器动画滑动效果

06-12

我们常见到移动页面很多动画效果，但是自己原生开发一个动画效果是相当难的今天就给大家推荐一套合适的模板使用方法： 1、将style.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的...

Zepto实现密码的隐藏/显示

10-20

Zepto是一个轻量级的JavaScript库，它拥有类似jQuery的API，并且专门针对移动端进行了优化。Zepto广泛用于前端开发，尤其适合在移动设备上使用，它使得开发者能够用更少的代码完成复杂的操作。本文将介绍如何使用...

zepto手机移动端弹出提示框图标动画特效

06-11

本资源“zepto手机移动端弹出提示框图标动画特效”正是一款专注于这一领域的优秀解决方案。Zepto是一个轻量级的JavaScript库，专为移动端浏览器设计，它提供了与jQuery相似的API，但在移动端具有更快的性能。首先...

zepto中animate方法的使用注意

weixin_30848775的博客

06-23

289

今天在用zepto的animate方法时，遇到回调函数不能执行的问题，最后发现在zepto中要想使回调函数在动画完成后执行，需要在回调函数前面加上动画类型这个参数才可以，具体写法如下： $("div").animate({left:100},800,"linear",function(){ 　　alert(111); }) 转载于:https://www.cnblogs.com/vellem...

zepto和jquery的区别，zepto的不同使用8条小结

热门推荐

kongjiea笔记

01-08

9万+

1. Zepto 对象不能自定义事件例如执行： $({}).bind('cust', function(){}); 结果： TypeError: Object has no method 'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象：例如： $('').bind('cust', function(){}); 2. Ze

移动端使用zepto.js想要滑动动画时写的jqurry方法

哈哈hyc的博客

11-30

944

移动端使用 zepto.js需要页面移动动画的时候可以使用下面的方法： var timer; var $body = $( 'body,html' ); var top = $('.btn_toTop').offset().top; function animated(id){ if($body.scrollTop() <= 0){ top...

zepto的scrollTo，实现锚点跳转

weixin_30793643的博客

09-28

281

实现功能：点击右侧字母A，实现锚点跳转功能：有同学可能说可以直接用锚点跳转实现，是的，锚点跳转可以实现这个功能，但是有一个问题，点击跳转后，再点击返回，返回的是上次跳转的结果，具体的原理就不用多说了，大家可以自己动手试一下，现在开始我们的正式代码部分：因为是在手机端的项目，在此案例中使用了zepto.js； css部分： .address_book { p...

zepto 移动端案例(动画等)

weixin_43294560的博客

02-03

731

处理:滑动页面事件、动画效果(缩放、各方位滑动、抖动、明暗)、代码示例: js文件: $(function(){ //定义方向对象 var direction={up:1,right:2,down:3,left:4}; //初始化两个页面坐标 var now={col:1,row:1}; var last={col:0,row:0}; //上一...

zepto实现动画返回顶部的功能

xdongll的专栏

09-09

4485

zepto的animate()源码采用css3的方式进行，而scrollTop属性不在css3的动画属性中，所以没有生效 (function (global) { $.fn.scrollTo = function (options) { var defaults = { toT: 0, //滚动目标位置 durTime: 500, //过渡动画时间

按钮控制div显示和隐藏（动画）

徐同保的专栏

09-04

7677

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按钮控制div显示和隐藏（动画）</title> <style> .my-transition { margin-top:

手机端zepto.js点击滑动显示隐藏

wtw945的博客

07-21

1776

var btn1 = $('.wtw-btn1') //弹框一 function box1(value1,value2){ let str = '<div class="wtw-pop wtw-pop1">'+ '<div class="wtw-pop-bg"></div>'+ '<div class="wtw-pop...

jQuery与Zepto中关于position()和offset()的差别详解

weixin_43344536的博客

01-11

482

今日用到了Zepto，发现对于其中position()和offset()方法之间的区别有些模糊，并且查询一些解答，发现对于position()的解释和实际试验有些出入。所以做了组试验，详细分解了一下其中的区别。先上背景结构先来说position() position()对于定位元素或非定位元素一视同仁，只返回该元素相对于其已定位父元素的绝对坐标；(但有例外需要注意，看下面第2条) ...

position: fixed;失效不好用因为主体使用动画css3 animation transform

x1a0x0的博客

01-20

813

暂时解决办法动态取消样式而后从新赋值； var domentClasscu =document.body.className ; document.body.className = ''; 执行动态效果完成后 document.body.className = domentClasscu; 有更好的方法的大牛，求留言 ...

自定义图片查看器：touch.js与zepto.js实现滑动、缩放与双击功能

作者在寻找现成解决方案时发现资料匮乏，因此决定通过编程实现图片的滑动浏览、双指缩放以及双击放大功能。具体实现包括以下几个关键部分： 1. **基础设置**： - 使用CSS样式清除默认样式，如`: *{padding:0;...