在createElement之后,直接把这个div append到body中,是不会触发css3 transition动画的

必须要让浏览器计算div的css属性后,然后再设置div的style,才会触发transition动画

代码如下

var e = document.createElement('div');
e.className = 'box e';
document.getElementById('wrapper').appendChild(e);
window.getComputedStyle(e).opacity; // 或者e.offsetWidth
e.className += ' in';

appendChild与Transition动画的更多相关文章

  1. CSS3的transition动画功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  3. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  4. 解决transition动画与display冲突的几种方法

    如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...

  5. Swift: 是用Custom Segue还是用Transition动画

    用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController.这两个controller之间要互相跳转,A-> ...

  6. safari渲染Transition动画不流畅问题

    用css3的transition过渡来做页面动画的时候,发现在chrome和ff流畅,在safari 不流畅: 度娘找到了淘宝UED的一个类似解决方案,动画就流畅了. 测试环境: win7 32bit ...

  7. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

  8. H5与C3权威指南笔记--transition动画

    translation:过渡 举个栗子:transition: width 1s linear; transition有三个属性,分别是transition-property, transition- ...

  9. 不定高元素的高度transition动画实现

    分析文档描述 CSS 支持动画的属性中的 height 属性如下: height :yes, as a length, percentage or calc() 即:当 height 的值是 leng ...

随机推荐

  1. PIE SDK地图放大镜

    放大镜,在地图的浏览过程中在主地图和次地图中起到很好的辅助作用, 要实现放大镜功能主要就是通过两个mapControl控件,主地图控件是mapControlMain,放大镜控件是UserControl ...

  2. while循环案例

    class While05{ public static void main(String[ ]args){ //练习1:使用while循环完成输出1------10中的每个数 /*int i =1; ...

  3. CenctOS6 and CenctOS7 多种姿势解决忘记密码

    -----linux---- 忘记密码啦!!! 忘记密码教程!!! 教你们忘记密码(我原来密码就是123456,忘记是不可能的!假装忘记的样子 0.0) 现在我们忘记密码了!对忘记密码了.我忘记密码了 ...

  4. python3初探

      官方网站:https://www.python.org/ 类库大全:https://pypi.python.org/pypi 基础类库:https://docs.python.org/3/libr ...

  5. (转)Saltstack系列

    Saltstack系列1:安装配置 Saltstack系列2:Saltstack远程执行命令 Saltstack系列3:Saltstack常用模块及API Saltstack系列4:Saltstack ...

  6. Nginx实践:(2) Nginx语法之localtion

    1. 概念 location是根据uri进行不同的定位.在虚拟主机的配置中,是必不可少的.location可以将网站的不同部分,定位到不同的处理方式上. location语法格式如下: locatio ...

  7. nyoj 999——师傅又被妖怪抓走了——————【双广搜】

    师傅又被妖怪抓走了 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 话说唐僧复得了孙行者,师徒们一心同体,共诣西方.自宝象国救了公主,承君臣送出城西,沿路饥餐渴饮,悟 ...

  8. javascript模块化是什么及其优缺点介绍

    模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口.模块间具有透明性 如今backbone.emberjs.spinejs.batmanjs 等MVC框架侵袭而 ...

  9. jrebel + myeclipse 实现热部署

    1.什么是jrebel JRebel是一套JavaEE开发工具.JRebel允许开发团队在有限的时间内完成更多的任务修正更多的问题,发布更高质量的软件产品. JRebel是收费软件. Jrebel 可 ...

  10. nginx配置文件分开配置

    在Linux中不同的用户都可能用到Nginx,如果不同的用户无法达成一个对nginx.conf编写标准,势必会导致nginx.conf里的内容变的相当混乱,极难维护.所以这里建议新建一个文件夹,这个文 ...