在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. 最小生成树的kruskal、prim算法

    kruskal算法和prim算法 都说 kruskal是加边法,prim是加点法 这篇解释也不错:这篇 1.kruskal算法 因为是加边法,所以这个方法比较合适稀疏图.要码这个需要先懂并查集.因为我 ...

  2. python查看模块版本及所在文件夹

    # 以Numpy为例 第一种方法:import numpy as np np.__version__ >>> '1.12.1' np.__file__ >>> '/ ...

  3. zabbix 监控 tomcat

    一, 脚本监控文件 #!/bin/bash # @Function # Find out the highest cpu consumed threads of java, and print the ...

  4. Vim as a Python IDE

    参考视频:http://v.youku.com/v_show/id_XNDY4NTM4NzY0.html 好的,在我们默认的centos6的操作系统中使用的python2,我们一般会再去安装一个pyt ...

  5. java集合常用操作

    收集一些常用集合操作的代码,用于治疗健忘症,:) set转list //构造Map数据 Map<String, String> map = new HashMap<String, S ...

  6. 01-struts2配置详解

    1 struts.xml配置详解 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE strut ...

  7. 九度oj题目1385:重建二叉树

    题目1385:重建二叉树 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4419 解决:1311 题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和 ...

  8. 用R处理不平衡的数据

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文来自云+社区翻译社,作者ArrayZoneYour 在分类问题当中,数据不平衡是指样本中某一类的样本数远大于其他的类别样本数.相比于多分 ...

  9. 常用shell脚本(持续更新中)

    1. 写一个shell脚本来得到当前的日期,时间,用户名和当前工作目录. 答案 : 输出用户名,当前日期和时间,以及当前工作目录的命令就是logname,date,who i am和pwd. #!/b ...

  10. 数据从mysql迁移到hbase的一些思考及设计

    一.进行迁移的原因 由于业务的发展,使用mysql进行建立索引进行搜索已经造成数据流的瓶颈卡在了数据库io,例如每次dump全表的时候,会造成压力过大,造成耗时很长,并且当前的数据量基本上已经达到了亿 ...