`
zhangyaochun
  • 浏览: 2608542 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

关于初始加载页面的动画震动

阅读更多

 

      本文主要来自:http://css-tricks.com/transitions-only-after-page-load/

 

      问题

 

       对于页面上结构化元素,当页面加载、绘制布局的时候,动画会触发。

 

 

      解决方案

 

  • 给body元素增加一个class
<body class="preload">

 

 

  • 增加css规则
.preload *{
       -webkit-transition:none !important;
       -moz-transition:none !important;
       -ms-transition:none !important;
       -o-transition:none !important;
}

 

 

  • 加载完成去掉这个东西
//无处不在的jQuery or zepto?
$("window").load(function(){
     $("body").removeClass("preload");
});

 

 

分享到:
评论

相关推荐

    jquery窗口震动特效

    3. **AJAX交互**:如果你希望在特定的Ajax事件(如数据加载完成)后触发震动效果,可以将震动函数与AJAX请求结合。jQuery的`.ajaxSuccess()`方法可以在每次Ajax请求成功后执行回调函数。 ```javascript $.ajax({ ...

    强大的CSS3动画库animate.css 50多种动画形式

    - **页面加载**:通过加载动画提升用户体验,让用户知道页面正在准备展示内容。 - **交互反馈**:当用户点击按钮或链接时,添加动画效果作为视觉反馈。 - **导航过渡**:在页面跳转或内容切换时,使用平滑的动画使...

    C#窗体震动

    - 在窗体加载事件(`Load`事件)或初始化方法中,设置初始位置。 - 创建一个定时器(`System.Windows.Forms.Timer`),并在需要触发震动效果时启动定时器。例如,可以将定时器的Tick事件与按钮点击事件关联。 - ...

    Android项目之——页面特效集合(附源码).zip

    1. **启动页动画**:Android的启动页通常用于展示品牌标识或进行初始化操作,同时也可以通过动态效果提高用户体验。源码可能包含各种类型的启动页动画,如渐变、缩放、旋转等,利用了`ViewPropertyAnimator`、`...

    jQuery实现的Div窗口震动效果实例

    - `jshaker`函数初始化插件,并对当前jQuery对象内的元素应用相对定位,确保动画能正确实现。 #### 4. 事件绑定 当用户点击具有`block`类的元素时,页面上的指定Div就会开始震动。`$(document).ready`方法确保了...

    android摇一摇随机变图片

    - 提供清晰的反馈,如短暂的震动和动画,让用户知道操作已被识别和响应。 6. **源码分析**: - 项目中的源码通常包含AndroidManifest.xml配置文件、布局文件(如activity_main.xml)、主Activity类以及可能的辅助...

    前端项目-jrumble.zip

    5. **自定义样式**:通过修改CSS,你可以调整震动元素的外观,例如震动动画的过渡效果、颜色等。 6. **兼容性**:虽然JRumble依赖jQuery,但请注意,它可能不支持所有版本的浏览器,尤其是较老的IE版本。在实际应用...

    QT之模仿手机主界面左右滑动翻页,带图片资源

    - 在每个子类中加载图片,可以使用QLabel配合QPixmap,或者直接使用QGraphicsView和QGraphicsScene展示动态图片。 - 将这些子类实例添加到QStackedWidget中,并设置合适的初始索引。 - 监听水平方向的QWheelEvent...

    浅析Android手机卫士之抖动输入框和手机震动

    这个XML文件定义了一个平移(translate)动画,持续时间为1000毫秒,初始位置在X轴上的偏移为0,结束位置向右偏移10像素。`@anim/cycle_7`引用了另一个插值器(Interpolator)`cycle_7.xml`,它决定了动画的节奏: ...

    JS仿苹果滑屏的JSWEB

    例如,当用户开始触摸屏幕时记录初始位置,然后在手指移动时更新位置,最后在手指离开屏幕时判断是否达到足够的滑动距离以触发页面切换。 AJAX(异步JavaScript和XML)是实现无刷新页面更新的关键技术。在滑屏效果...

    触摸滑动切换产品

    2. **css**:这个目录可能包含了一个或多个CSS文件,用于定义页面的样式和布局。CSS可以用来设置滑动元素的大小、位置、过渡效果等,以实现平滑的动画效果。 3. **images**:这个目录存放了用于滑动切换的图片资源...

    手机触屏幻灯片,全支持触摸切换

    5. **图片加载优化**:考虑到移动网络的限制,可以采用延迟加载(lazy loading)技术,只在图片进入视口时才开始加载,以减少页面初始化时的数据量和加载时间。 6. **交互反馈**:良好的用户反馈是提高用户体验的...

    Android仿消消乐游戏

    3. 存档加载:提供保存和加载游戏进度的功能,便于用户随时继续游戏。 五、用户体验优化 1. 音效:添加消除、失败、胜利等音效,增强游戏体验。 2. UI反馈:对用户操作及时做出反馈,如点击方块时的轻微高亮,...

    鼠标经过图片放大功能

    - 使用jQuery的`$(document).ready()`确保在页面加载完成后再执行脚本。 - 绑定`mouseenter`和`mouseleave`事件到图片元素上。 - 在`mouseenter`事件中,改变图片的CSS属性,例如`width`和`height`,实现放大效果...

    MRProgress.zip

    通过简单的初始化方法,设置进度值、颜色、动画速度等属性,就能在应用的任何地方添加进度指示器。同时,MRProgress 提供了详细的文档和示例代码,帮助开发者快速理解和集成这个库。 总的来说,MRProgress 是一个...

    语言程序设计资料:JavaScript部分实例.docx

    根据提供的文档内容,我们可以归纳出一系列关于JavaScript编程的重要知识点,主要涉及了JavaScript在网页开发中的实际应用案例。接下来,我们将对这些案例进行详细的解析与解释。 ### 1. 鼠标和浏览器及IF语句 ###...

    黑马程序员 安卓学院 万元哥项目经理 分享220个代码实例

    |--Activity不允许横竖屏切换 |--Activity常用小技巧 |--Activity按返回直接回到桌面 |--aidl之结合反射获取应用缓存大小等空间占用 |--aidl调用系统service未公开的方法挂电话 ...|--震动效果的实现

    利用SurfaceView连接随机点绘制的闪电效果

    - 为了保持流畅的动画效果,应当避免在主线程中进行大量计算或长时间阻塞,确保及时更新`Surface`。 - 可能需要考虑性能和内存消耗,例如通过复用对象、合理缓存数据以及适时释放资源来提高效率。 综上所述,这个...

    AndAndroid 游戏之拼图源码

    - 打乱顺序:使用随机数生成器实现图片块的随机排列,保证每次游戏的初始状态不同。 4. 触摸事件处理: - onTouchEvent:监听用户触摸屏幕的动作,实现拖动拼图块的功能。 - MotionEvent:分析ACTION_DOWN、...

    c# 窗体抖动 模仿QQ窗体抖动

    2. **设置初始位置**:在窗体加载事件中,记录窗体的初始位置,这将作为抖动结束后回归的位置。 3. **创建定时器**:使用`System.Windows.Forms.Timer`类创建一个定时器,设置合适的间隔时间,如50毫秒。定时器的...

Global site tag (gtag.js) - Google Analytics