<!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. linux学习的任督二脉-进程调度和内存管理

    转自 宋宝华老师的博客原文:https://blog.csdn.net/21cnbao/article/details/77505330 内功心法 学习或遇到问题时,反过来主动思考如果我是设计者,我会 ...

  2. pytest-mark跳过

    import pytestimport sysenvironment='android' @pytest.mark.skipif(environment=="android",re ...

  3. mysql的sql筛选排重最大值并修改其属性

    修改属性 mysql -h192.168.1.51 -uroot -e "use codex_game_s1051_h; update user_info set isActive=0 wh ...

  4. AN之文献综述

    1.在北京工业大学的<Prediction of effluent Ammonia Nitrogen using FNN-based CBR>这篇文章中,它将温度.pH.ORP.NO3-N ...

  5. 欧拉定理、欧拉函数、a/b%c

    怕忘了…… 欧拉函数 定义.证明.打表方法 欧拉定理 定义.证明 https://blog.csdn.net/zzkksunboy/article/details/73061013 剩余系.完系.简系 ...

  6. Bootstrap4入门

    基础样式 颜色 文字颜色以.text-*开头 背景颜色.bg-* primary / seconday / success / danger / warning / info / muted / wh ...

  7. Servlet 上传图片

    目录 Servlet 上传图片 预备 需求包 pom 前端代码 Servlet 上传图片 预备 需求包 commons-fileupload -用于上传 jstl -用于jsp页面遍历 servlet ...

  8. Intergalactic Map SPOJ - IM

    传送门 我觉得我写得已经和题解一模一样了,不知道为什么就是过不了..懒得拍了,反正不是很难,不太想浪费时间. 1~2~3的一条路径相当于从2~1的一条路径+2~3的一条路径,点不能重复经过,于是拆点. ...

  9. NX二次开发-UFUN获取一个图层类别的tag UF_LAYER_ask_category_tag

    NX11+VS2013 #include <uf.h> #include <uf_ui.h> #include <uf_layer.h> UF_initialize ...

  10. web应用本质

    web应用的本质 在之前学习的socket网络编程中,是基于: 架构:C/S架构 协议:TCP/UDP协议 运行在OSI七层模型中的传输层 那么在web应用中,是基于: 架构:B/S架构 协议:Htt ...