在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. Linux中断分层--软中断和tasklet

    1. Linux中断分层 (1)上半部:当中断发生时,它进行相应的硬件读写,并“登记”该中断.通常由中断处理程序充当上半部.(一般情况下,上半部不可被打断) (2)下半部:在系统空闲的时候,对上半部“ ...

  2. 写给初学者的话---linux使用说明

    2018年noip上海赛区可以使用window操作系统的美梦终究还是破灭了!!!!上海大部分noip选手都陆陆续续开始改linux........好吧,那我们今天来看看linux操作系统中,noip选 ...

  3. python数组(列表、元组及字典)

    python数组的使用 2010-07-28 17:17 1.Python的数组分三种类型: (1) list 普通的链表,初始化后可以通过特定方法动态增加元素. 定义方式:arr = [元素] (2 ...

  4. 接口隔离原则(Interface Segregation Principle)ISP

    using System; using System.Collections.Generic; using System.Text; namespace InterfaceSegregationPri ...

  5. 【程序员技术练级】学习一门脚本语言 python(一)文件处理

    现在工作上主要用的语言是java,java在企业级的应用上能够发挥很好的用途,但有时候要做一个小功能时,比如批量更新文件,抓取网页等,这时候用java就显得太笨重了.因此就学习了python这门脚本语 ...

  6. [實現DDD] 第10章 聚合(1)設計原則

    聚合只是將一些實體(Entity)與值對象(Value Object)聚集起來的對象樹嗎?? 有些途徑可能使我們設計出不正確的聚合模型, 如:可能為了對象組合上的方便而將聚合設計的很大;也可能設計的聚 ...

  7. 树莓派3(Raspbain系统)安装.net环境

    因为公司之前做的网站项目都是基于微软的.net平台,现在需要在树莓派3上测试它是否能负载起正常的访问请求.最开始直接的想到微软3月份刚发布针对于树莓派3的win10系统,其实说是win10,也就是一个 ...

  8. [SDOI2013]刺客信条

    Description 故事发生在1486 年的意大利,Ezio 原本只是一个文艺复兴时期的贵族,后来因为家族成员受到圣殿骑士的杀害,决心成为一名刺客.最终,凭借着他的努力和出众的天赋,成为了杰出的刺 ...

  9. [转]Newtonsoft.Json高级用法

    本文转自:http://www.cnblogs.com/yanweidie/p/4605212.html 手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多 ...

  10. swagger快速开发

    转载:https://blog.csdn.net/xxoo00xx00/article/details/77163399 swagger 学习笔记 搭建环境: 1,jdk1.8 2,idea 3,sp ...