首页 > 其他 > 详细

transition

时间:2018-09-21 22:47:27      阅读:189      评论:0      收藏:0      [点我收藏+]

1:transition: 

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

简写属性transition:

transition是一个简写属性,用于 transition-property,transition-duration,transition-timing-function, 和transition-delay。

(1)transition-property:

属性值:

  none

      没有过渡动画。

  all

      所有可被动画的属性都表现出过渡动画。

  IDENT

      属性名称 (可以指定多个)

(2)transition-duration

  属性以秒或毫秒为单位指定过渡动画所需的时间。

默认值为 0s ,表示不出现过渡动画。

 

(3)transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上,通过这个函数会建立一条加速度曲线,因此在整个transition变化过程中,变化速度可以不断改变

默认值:ease

    属性值:

         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(<integer>,[,[start|end]]?)

                      第一个参数:必须为正整数,指定函数的步数

                      第二个参数:指定每一步的值发生变化的时间点(默认值end)

 (4)transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。

默认值:0s

//当属性值列表长度不一样的时候

transition-property: background,width,height;

transition-duration: 3s,2s;

transition-delay:3s,2s;

transition-timing-function:linear;

 

 

transition-property: background,width,height;

transition-duration: 3s,2s,3s;

transition-delay:3s,2s,3s;

transition-timing-function:linear,ease,ease;

 

 

超出的情况下是会被全部截掉的

不够的时候,关于时间的会重复列表,transition-timing-function的时候使用的是默认值ease

当过渡完成时触发一个事件,在符合标准的浏览器下,这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd

(每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件)

 

在transition完成前设置 display: none,事件同样不会被触发

推荐抒写顺序

    过渡时间  过渡样式  过渡形式  延迟时间 [,过渡时间  过渡样式  过渡形式  延迟时间]

transition: 2s 3s width,3s height; //简写属性第一个默认赋值给transition-duration,第二个时间赋值给transition-delay:

////代码演示

<!DOCTYPE html>

<html>

   <head>

      <meta charset="UTF-8">

      <title></title>

      <style type="text/css">

          html{

             height: 100%;

          }

          body{

             height: 60%;

             width: 80%;

             border: 1px solid;

             margin: 10%;

          }

          .box1{

             width: 100px;

             height: 100px;

             background-color: red;

             position: absolute;

             top: 0;

             right: 0;

             bottom: 0;

             left: 0;

             margin: auto;

             /*transition: 3s;*/

             transition-property: width,height;

             transition-duration: 2s,2s;

          }

      </style>

   </head>

   <body>

      <div class="box1">

         

      </div>

      <script type="text/javascript">

          window.onload = function(){

            

             var box1 = document.querySelector(".box1");

             document.documentElement.onmousemove = function(){

                box1.style.width = "300px"

                box1.style.height = "300px";

               

             }

             box1.addEventListener("transitionend",function(){

                console.log("过渡");

             })

            

            

          }

      </script>

   </body>

</html>

transition

原文:https://www.cnblogs.com/love-life-insist/p/9688623.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!