<!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. idea中maven在install时出现一个问题

    Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test (default-test) on ...

  2. 线性回归——Python代码实现

    import numpy as np def computer_error_for_give_point(w, b, points): # 计算出 观测值与计算值 之间的误差, 并累加,最后返回 平均 ...

  3. form编码方式application/x-www-form-urlencoded和multipart/form-data的区别？

    application/x-www-form-urlencoded: 表单数据编码为键值对,&分隔 multipart/form-data: 表单数据编码为一条消息,每个控件对应消息的一部分 ...

  4. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  5. HttpURLConnection模拟登录学校的正方教务系统

    教务系统登录界面 如图1-1 1-1 F12-->network查看登录教务系统需要参数: __VIEWSTAT txtUserName TextBox2 txtSecretCode Radio ...

  6. Vue.js 监听属性

    demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

  7. vue footer点击变色

    <header class="tab_nav"> <div v-for="(item,index) in tabNav" @click=&qu ...

  8. 过滤掉map集合中key或value为空的值

    package cn.com.utils; import org.apache.commons.lang3.StringUtils; import java.util.Collection; impo ...

  9. TS-接口

    接口 TS的核心原则之一是对值所具有的结构进行类型检测 接口初探 function printLabel(labelledObj: { label: string }) { console.log(l ...

  10. JAVA jar命令（一）-jar打包class文件

    jar包本质上是将所有class文件.资源文件压缩打成一个包(也可以选择不压缩),可选择在jar包中生成META-INF/MANIFEST.MF文件,MANIFEST.MF是清单文件,里面可以记录主类 ...