<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 100px;

                height: 100px;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 50px/200px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

                transition-property: width;

                transition-duration: 9s;

                 transition-timing-function: inherit;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

            body:hover #test{

                transition-property: height;

                width: 200px;

                height: 200px;

            }

        </style>

    </head>

    <body>

        <div id="test">

        </div>

    </body>

</html>

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 10px;

                height: 10px;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 50px/200px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

                transition-property: width;

                transition-duration: 9s;

                 transition-timing-function: inherit;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

        </style>

        <script type="text/javascript">

            //transition 在元素首次渲染还没有结束的情况下是不会触发的

            var tst=document.querySelector("#test");

            tst.style.width="300px";

        </script>

    </head>

    <body>

        <div id="test">

        </div>

    </body>

</html>
在元素首次渲染还没有结束的情况下是不会触发的

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. Java 序列化和反序列化（三）Serializable 源码分析 - 2

    目录 Java 序列化和反序列化(三)Serializable 源码分析 - 2 1. ObjectStreamField 1.1 数据结构 1.2 构造函数 2. ObjectStreamClass ...

  2. ES6篇

    ES6新特性你了解了多少呢? 珠峰培训 5月17日 ES6新特性 ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以 ...

  3. 内网渗透_win_socks代理_reGeorg+proxifier

    遇到内网windows机器,如果想远程登陆,通常得通过代理,常用的nc.lcx 工具可满足要求. 如 lcx 示例: 两台机器上均上传lcx.exe 在 xp机器(公网)上执行 lcx.exe -li ...

  4. 微信小程序のwxml绑定

    一.微信小程序文件的构成 微信小程序包括js文件.json文件.wxml文件.wxss文件.wxs文件.js文件是展现界面的,注册这个程序的的页面,一般一个大写的Page({ })嵌入: json文件 ...

  5. userdel -删除使用者帐号及相关档案

    总览 SYNOPSIS userdel [-r] login 描述 userdel 命 令 修 改 系 统 帐 号 档 删 除 所 有 login 会 参 考 的 部 份 . 使 用 者 名 称 必 ...

  6. Maven的标准settings.xml文件

    配置目标 1. 默认jdk采用java8 2. 配置阿里云镜像和私服镜像, 并且先从阿里云下载, 下载不到的再去私服下载 <?xml version="1.0" encodi ...

  7. Atcoder arc092

    E-Both Sides Merger 给你一个序列,支持两种操作,直到序列中只有一个数时停下来,使得剩下数最大,并输出选数方案. 操作1:扔掉一个最前端或最后端的元素.操作2:选取一个不在边界上的元 ...

  8. 关于synchronized和Lock

    原文链接:关于volatile关键字解析,synchronized和Lock参考 深入浅出,解释的非常清楚,有条理~~~ 以下为转载内容: Java并发编程:volatile关键字解析 volatil ...

  9. delphi 单元 MSHTML 之Ihtmldocument2

    delphi : Ihtmldocument2接口的利用 MSHTML是微软公司的一个COM组件,该组件封装了HTML语言中的所有元素及其属性,穿越其供给的规范接口,能够访问指定网页的所有元素． MS ...

  10. tomcat部署安全证书文件（阿里云SSL证书）

    1.下载安全证书文件: 这里使用的是阿里云SSL证书(免费一年) 2.把下载的压缩包进行解压 3.将pfx文件拷贝至服务器 4.利用jdk将pfx转jks 5.cmd进入命令行 6.切换至jdk的bi ...