1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #test{
  8.                 width: 100px;
  9.                 height: 100px;
  10.  
  11.                 border:3px solid red;
  12.                 background: pink;
  13.                 text-align: center;
  14.                 font: 50px/200px "微软雅黑" ;
  15.  
  16.                 position: absolute;
  17.                 left: ;
  18.                 right: ;
  19.                 bottom: ;
  20.                 top: ;
  21.                 margin: auto;
  22.                 transition-property: width;
  23.                 transition-duration: 9s;
  24.                  transition-timing-function: inherit;
  25.  
  26.             }
  27.             html{
  28.                 height: %;
  29.             }
  30.             html body{
  31.                   height: %;
  32.                   border: 3px solid yellow;
  33.                   margin-top: 100px;
  34.  
  35.             }
  36.             body:hover #test{
  37.                 transition-property: height;
  38.                 width: 200px;
  39.                 height: 200px;
  40.  
  41.             }
  42.  
  43.         </style>
  44.     </head>
  45.     <body>
  46.         <div id="test">
  47.  
  48.         </div>
  49.     </body>
  50. </html>

异步加载                                       确实没看懂这什么坑

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #test{
  8.                 width: 10px;
  9.                 height: 10px;
  10.  
  11.                 border:3px solid red;
  12.                 background: pink;
  13.                 text-align: center;
  14.                 font: 50px/200px "微软雅黑" ;
  15.  
  16.                 position: absolute;
  17.                 left: ;
  18.                 right: ;
  19.                 bottom: ;
  20.                 top: ;
  21.                 margin: auto;
  22.                 transition-property: width;
  23.                 transition-duration: 9s;
  24.                  transition-timing-function: inherit;
  25.  
  26.             }
  27.             html{
  28.                 height: %;
  29.             }
  30.             html body{
  31.                   height: %;
  32.                   border: 3px solid yellow;
  33.                   margin-top: 100px;
  34.  
  35.             }
  36.  
  37.         </style>
  38.         <script type="text/javascript">
  39.  
  40.             //transition 在元素首次渲染还没有结束的情况下是不会触发的
  41.             var tst=document.querySelector("#test");
  42.             tst.style.width="300px";
  43.         </script>
  44.  
  45.     </head>
  46.     <body>
  47.         <div id="test">
  48.  
  49.         </div>
  50.     </body>
  51. </html>
  1. 在元素首次渲染还没有结束的情况下是不会触发的

css---过渡天坑的更多相关文章

  1. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  2. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  3. 047——VUE中css过渡动作实例

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

  4. css过渡和2d详解及案例

    css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...

  5. Vue css过渡 和 js 钩子过渡

    css过渡 <transition name="slide"> <div v-show="!showChatInput" class=&quo ...

  6. CSS过渡、CSS动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...

  7. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  8. css 过渡和 变形

    一.过渡(transition) transition-property: 指定具有过渡效果的CSS样式属性名 1.默认值: all 2.仅具有中间值(CSS样式值是数值的)的CSS样式具有过渡效果 ...

  9. css过渡

    过渡transition是一个复合属性 例子1 .example{ width: 200px; height: 100px; background-color: blanchedalmond; tra ...

  10. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

随机推荐

  1. 2018-2-13-win10-edge扩展

    title author date CreateTime categories win10 edge扩展 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...

  2. 2018-2-13-win10-uwp-如何拖动一个TextBlock的文字到另一个TextBlock-

    title author date CreateTime categories win10 uwp 如何拖动一个TextBlock的文字到另一个TextBlock lindexi 2018-2-13 ...

  3. 标准 IO 测试 可以打开多少流

    #include <stdio.h> #include <string.h> #include <errno.h> //trerror(errno) int mai ...

  4. 标准 I/O （带缓冲）

    标准IO中分文本流和二进制流 windows系统中:(1) 二进制流 - 换行符 '\n'    (2) 文本流 - 换行符 ‘\r' '\n' linux 系统中:不区分文本流和二进制流:换行符 - ...

  5. 笔记45 Hibernate快速入门（二）

    Hibernate O/R 映射 一.多对一 一个Product对应一个Category,一个Category对应多个Product,所以Product和Category是多对一的关系.使用hiber ...

  6. easyui datagrid 绑定从后台得到的复杂的特殊数据结构

    由于项目需要,从后台得到的数据统一为了类似{state:xxx,data:xxx,message:xxx}类型 但是easyui datagrid却只认{total:xxx,rows:xxx}...所 ...

  7. mysqld_safe A mysqld process already exists

    最近修改mysql密码遇到mysqld_safe A mysqld process already exists问题: 解决步骤: 1:ps aux |grep mysql   查看mysql的进程. ...

  8. python中模块和包的概念

    1.模块 一个.py文件就是一个模块.这个文件的名字是:模块名.py.由此可见在python中,文件名和模块名的差别只是有没有后缀.有后缀是文件名,没有后缀是模块名. 每个文件(每个模块)都是一个独立 ...

  9. leetcood学习笔记-67-二进制求和

    题目描述: 第一次提交: class Solution: def addBinary(self, a: str, b: str) -> str: list_a,list_b=[],[] for ...

  10. TPCx-BB官宣最新世界纪录，阿里巴巴计算力持续突破

    2019年9月17日,TPC官宣Alibaba Cloud MaxCompute认证结果.同月26日,杭州云栖大会阿里巴巴宣布了这一成绩,飞天大数据平台计算引擎MaxCompute成为全球首个TPCx ...