<!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. kafka原理概念提炼

    Kafka Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实 ...

  2. java-day25

    . 标签学习:         1. 文件标签:构成html最基本的标签             * html:html文档的根标签             * head:头标签.用于指定html文档 ...

  3. spring boot jpa 多表关联 @OneToOne @OneToMany @ManyToOne@ManyToMany

    1.一对一关联 @OneToOne import lombok.Data; import javax.persistence.*; /** * @Author: GWL * @Description: ...

  4. linux每日命令(3):which命令

    这个命令我也神佑体会它的用处,在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which     查看可执行文件的位置. whereis 查看文件的位置. locate ...

  5. xxd - 以十六进制形式表示

    总览 (SYNOPSIS) xxd -h[elp] xxd [options] [infile [outfile]] xxd -r[evert] [options] [infile [outfile] ...

  6. tomcat访问控制及站点部署

    访问控制: 在访问tomcat服务器状态时,出现403错误. 解决方法: [root@localhost ~]# vim /usr/local/tomcat8/conf/tomcat-users.xm ...

  7. 【学术篇】SPOJ FTOUR2 点分治

    淀粉质入门第一道 (现在个人认为spoj比bzoj要好_(:з」∠)_ 关于点分治的话推荐去看一看漆子超的论文>>>这里这里<<< 之前一直试图入点分治坑, 但是因 ...

  8. loj2001[SDOI2017]树点染色

    题意:给你一棵树,一开始每个点上的颜色互不相同.三种操作:op1:x到根的路径上的点都染上一种新的颜色.op2:设一条路径的权值为val(x,y),求x到y路径的val.op3:询问x的子树中最大的到 ...

  9. NX二次开发-重命名装配组件

    在GC工具里面是有一个重命名装配组件的命令的,除了这个外,好像没看到NX里还有其他可以重命名装配组件的命令,本来以为在UFUN ASSEM装配的头文件里会有更改装配部件名字的函数,但是没有找到,可能没 ...

  10. 禁用NX软件启动欢迎界面[转载]

    环境变量UGII_BACKGROUND_URL  NONE 转载自https://www.ugnx.net/wt/414