在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. UVa 253

    UVa 253 #include <iostream> #include <cstdio> #include <string> #include <cstri ...

  2. 2019.3.28 JDBC相关

    JDBC(Java Data Base Connectivity) JDBC是一组用Java编写的类和接口 使用JDBC的好处: 1.Java的开发人员完全不需要关心数据库的连接方式和实现手段 2.提 ...

  3. centos7升级firefox的flash插件

    1. 在https://get.adobe.com/flashplayer/下载文件.选择.tar.gz. 2. 下载的文件名为flash_player_npapi_linux.x86_64.tar. ...

  4. PIE SDK符号选择器

    1. 功能简介 符号选择器可以根据不同的需求进行改变图层的符号形状以及颜色,下面基于PIE SDK介绍如何使用符号选择器. 2. 功能实现说明 2.1.  实现思路及原理说明 第一步 加载图层 第二步 ...

  5. javascript 定时任务封装

    /** * 定时任务 * 间隔时间,执行次数,要带的参数,要执行的函数. */ var TimingTask = function(time,count,param,fun){ this.id = - ...

  6. Kafka消费不到数据的特殊情况

    我大约是把kafka消费不到数据的特殊情况都经历了一遍了吧= =. kafka消费不到数据的原因,首先检查配置之类的,如是否设置了group.id,对应的topic是否正确等等,这些不多说. 下面是我 ...

  7. Mavne 打包时出现程序包找到不的问题

    <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactI ...

  8. WPF中嵌入Skyline提供的COM组件填坑

    网上有很多关于在WPF中使用的Skyline提供的COM组件的教程,但大都雷同一律,其中很多的细节均为涉及,本文意在在其原基础上进行一些细节的补充. 工具:Visual Studio 2017 1.  ...

  9. nyoj 61——传纸条(一)——————【双线dp】

    传纸条(一) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行 ...

  10. [转]Load ASP.NET MVC Partial Views Dynamically Using jQuery

    本文转自:http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx Most of the t ...