动画一:过渡(超详细!)

目录

微信小程序获取地理位置

yarn

一、了解过渡(transition)

DVE

1.作用

烧录器

2.触发的条件

anaconda

3.优点

408

二、过渡的基本属性及其属性值

redis 复制集群搭建手册

1. transition-property

图像分割

2. transition-duration

jdk

3. transition-timing-function

mfc

1)ease  默认值(先慢中快后慢运动)

arm

2)linear (匀速运动)

分布式

3)ease-in(先慢后快运动)

时空视频数据集

4)ease-out  (先快后慢运动)

存储算法

5)ease-in-out(先快中慢后快运动)

websocket

6)steps(数值)(分步运动)

Stream流

4、transition-delay

Android日历选择

5.transition

网络工程师


万无一失

一、了解过渡(transition)

1.作用

通过过渡可以指定一个属性发生变化时的切换方式

input 拍照旋转

2.触发的条件

在某种条件下可以触发,例如hover、active…

SQL索引

3.优点

IE10开始兼容,移动端兼容良好,并且通过过渡可以创建一些非常好的效果,提升用户体验

语义分割

二、过渡的基本属性及其属性值

1. transition-property

指定执行过渡的属性,多个属性,使用逗号隔开,例如height,background-color,width等

库依赖

transition-property:width;

ethers

2. transition-duration

指定过渡效果的持续时间,属性值可以跟秒或者毫秒

Linux网络基础

transition-duration:1s;

Windows 7 无法共享

3. transition-timing-function

过渡的时序函数,它的可选属性值比较多

python解释器

1)ease  默认值(先慢中快后慢运动)

transition-timing-function:ease;

汇编

2)linear (匀速运动)

3)ease-in(先慢后快运动)

4)ease-out  (先快后慢运动)

5)ease-in-out(先快中慢后快运动)

6)steps(数值)(分步运动)

接下来做个示范给大家

通信

设置内容区的样式:
 * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul {
        width: 500px;
        border: 10px solid red;
        margin: 10px auto;
      }
      li {
        width: 60px;
        height: 60px;
        background-color: green;
        margin: 5px 0;
        transition-property: margin-left;
        transition-duration: 3s;
        /* transition-delay: 1s; */
      }
      li:first-child {
        transition-timing-function: ease;
      }
      li:nth-child(2) {
        transition-timing-function: linear;
      }
      li:nth-child(3) {
        transition-timing-function: ease-in;
      }
      li:nth-child(4) {
        transition-timing-function: ease-out;
      }
      li:nth-child(5) {
        transition-timing-function: ease-in-out;
      }
      li:nth-child(6) {
        transition-timing-function: steps(4);
      }
      ul:hover > li {
        margin-left: 440px;
      }
内容区:
   <ul>
      <li>ease</li>
      <li>linear</li>
      <li>ease-in</li>
      <li>ease-out</li>
      <li>ease-in-out</li>
      <li>steps(4)</li>
    </ul>

Android区间日历

 

 

如图所示:每一个子元素盒子设置了不同的 过渡的时序函数,它的运动的方式和快慢都是不一样的,由于展示不了视频,不过如果感兴趣可以自己演示一下,也是会有收获的

4、transition-delay

过渡效果的延迟,等待一段时间后执行过渡

意思是设置了过渡延迟后,设置了多长时间就在多长时间后才会进行过渡

5.transition

可以同时设置过渡相关的所有属性 也是前面五种属性的缩写

transition:width 2s linear 2s;

注意:缩写里如果出现了两个时间,那么第一个时间系统默认为过渡时间,第二个时间才是延迟时间!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注