022过渡

最新推荐文章于 2021-05-08 19:18:49 发布

Manta__

最新推荐文章于 2021-05-08 19:18:49 发布

阅读量143

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Manta__/article/details/104916120

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

transition
众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。
CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义

a.过渡只关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态
b.元素在初次演染还没有结束的时候，是没有办法触发过渡的
C.在绝大部分变换样式的切换时，变换组合的个数或位置不一样时，是没有办法触发过渡的

简写属性transition:
transition是一个简写属性，用于 transition-property,transition-duration,transition-timing-function, 和transition-delay。
CSS 过渡由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间

默认值：
　　transition-delay: 0s
　　transition-duration: 0s
　　transition-property: all
　　transition-timing-function: ease

注意
在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay
当属性值的列表长度不一致时，跟时间有关的重复列表，transition-timing . function使用默认值

推荐抒写顺序
　过渡时间过渡样式过渡形式延迟时间 [，过渡时间过渡样式过渡形式延迟时间]

兼容性
transition 可以不用厂商前缀，不过鉴于标准刚刚稳定，对于基于 Webkit的浏览器仍然需要厂商前缀。如果想兼容旧版本的浏览器那么也需要厂商前缀（例如Firefox 15 及之前版本, Opera 12 及之前版本)

transition-duration 　　属性以秒或毫秒为单位指定过渡动画所需的时间。
　　　-默认值为 0s ，表示不出现过渡动画。
　　　 -可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
　　　 -属性值
　　　　　以毫秒或秒为单位的数值
类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。一定要加单位(不能写0 一定要写0s 1s,0s,1s)！

== transition-property：== 　　指定应用过渡属性的名称(并不是所有的属性都可以动画)
　　-默认值为 all，表示所有可被动画的属性都表现出过渡动画
　　 -可以指定多个 property
　　 -属性值：
　　　　 none没有过渡动画。
　　　　 all 所有可被动画的属性都表现出过渡动画。
　　　　 property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-timing-function:
CSS属性受到 transition的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变
默认值：ease

你可以规定多个timing function,通过使用 transition-property属性，可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease）。如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。

属性值：
　　　1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
　　　2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
　　　3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
　　　4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
　　　5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
　　　6、cubic-bezier：贝塞尔曲线
　　　7、step-start：等同于steps(1,start)
　　　　　step-end：等同于steps(1,end)
　　　　　steps(,[,[start|end]]?)
　　　　　　　第一个参数：必须为正整数，指定函数的步数
　　　　　　　第二个参数：指定每一步的值发生变化的时间点（默认值end）

transition-delay　　属性规定了在过渡效果开始作用之前需要等待的时间。
　　-默认值：0s

-你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变

-属性值
值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。0必须带单位

检测过度是否完成DOM2
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）
在transition完成前设置 display: none，事件同样不会被触发

 <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
  
   html{
    height: 100%;
   }
   body{
    width: 60%;
    height: 60%;
    border: 1px solid;
    margin: 100px auto 0;
   }
  
   #test{
    width: 100px;
    height: 100px;
    background: pink;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
   }
   /* 本应是，鼠标移入宽过度，移出高过度
    css解读速度快，在鼠标移入的一瞬间hover解读，高会覆盖宽所以移入时高发生变化
    移出时宽覆盖高，所以宽发生变化
    */
   body:hover #test{
    transition-property: height;
    width: 200px;
    height: 200px;
    /* transition-property: height; */
   }
   
  </style>
 </head>
 <body>
  <div id="test">
  </div>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
  
   html{
    height: 100%;
   }
   body{
    width: 60%;
    height: 60%;
    border: 1px solid;
    margin: 100px auto 0;
   }
  
   #test{
    width: 100px;
    height: 100px;
    background: pink;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
   }
  </style>
 </head>
 <body>
  <div id="test">
  </div>
 </body>
 <script type="text/javascript">
  //transition在元素首次渲染还没有结束的情况下是不会被触发的 
  var  test=document.getElementById("test");
  test.style.width="300px";
  
//  window.οnlοad=function(){
  // setTimeout(function(){
  //  var test = document.querySelector("#test");
  //  test.style.width="300px";
  // },3000)
   
//  }
 </script>
</html>

Manta__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
022过渡

transition众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这...
复制链接

扫一扫

专栏目录