在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. 2019.3.26 SQL语句(进阶3)

    表的联查 员工表与部门表 员工表:id,姓名,年龄,部门id 部门表:部门id,部门名,部门成立时间,部门领导,部门职责.... 表和表之间的关系 一对一 一对多 多对多 创建联查 创建表 先创建被依 ...

  2. python 学习笔记二_列表

    python不需要声明类型信息,因为Python的变量标识符没有类型. 在Python中创建一个列表时,解释器会在内存中创建一个类似数组的数据结构类存储数据,数据项自下而上堆放(形成一个堆栈).索引从 ...

  3. Python+Selenium操作select下拉框

    首先需要倒入Select模块: from selenium.webdriver.support.select import Select 常用方法: 通过索引定位:select_by_index() ...

  4. poi读取excel2010

    package com.icss.test; import java.io.FileInputStream;import java.io.InputStream;import java.util.Ar ...

  5. MHA 高可用架构部署

    一, MHA 介绍 MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公 ...

  6. GreenPlum 大数据平台--介绍

    一,GreenPlum 01,介绍: Greenplum是一种基于PostgreSQL的分布式数据库,其采用shared-nothing架构,主机.操作系统.内存.存储都是自我控制的,不存在共享. 官 ...

  7. Oracle 基础系列之1.1 oracle的安装

    一. 1.以下是安装Oracle的一些硬件上的条件: (1).操作系统最后是windows2000(也就是服务器版的操作系统) (2).内存最好在1G以上,当然越大越好(因为Oracle服务启动就要消 ...

  8. Eclipse/Myeclipse/Scala IDEA for Eclipse里两种添加插件的方法(在线和离线)

    不多说,直接上干货! 方法1:在线安装 第一步,在eclipse菜单栏下,选中help ---->Install New Software 第二步,点击图中 add 添加软件下载地址 第三步 , ...

  9. Hadoop升级

    1.停止所有MR任务 stop-mapred.sh 2.检查HDFS hadoop fsck / -files -blocks -locations > dfs-v-old-fsck-.log ...

  10. git命令(转载学习)

    Git使用教程 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是 ...