transition

最新推荐文章于 2023-10-15 20:38:19 发布

壹零捌壹

最新推荐文章于 2023-10-15 20:38:19 发布

阅读量681

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/kamianlaidaa/article/details/117451878

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

transition

Transition 简介：

Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。

transition-property 用于指定应用过渡属性的名称
transition-duration 用于指定这个过渡的持续时间
transition-delay 用于指定延迟过渡的时间
transition-timing-function 用于指定过渡的类型

transition-property：

是用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用, 分隔。默认值为 all 也就是所有的元素都应用过渡效果。

想让容器的宽高有一个过渡的效果的代码：

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: dodgerblue;
        transition-property: width, height;   /*设置宽高过渡的属性*/
    }

    .box:hover {  /*在鼠标移入的时候修改宽高*/
        width: 400px;
        height: 400px;
    }
</style>

<body>
    <div class="box"></div>
</body>

当只设置了 transition-property 属性而没有设置过渡持续时间的时候，过渡效果不会生效。

transition-duration：

用于设置过渡的持续时间，属性值以秒s或毫秒ms为单位，默认值为0。同样可以指定多个时长，多个每个时长会被应用到由 transition-property 指定的对应属性上。
想让容器的宽度有一个几秒的过渡效果

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: dodgerblue;
        transition-property: width, height;
        transition-duration: 5s, 3s;  /*设置与 transition-property 对应的过渡时间*/
    }

    .box:hover { /*在鼠标移入的时候修改宽高*/
        width: 400px;
        height: 400px;
    }
</style>
</head>

<body>
    <div class="box"></div>
</body>

transition-delay:

规定了在过渡效果开始作用之前需要等待的时间（延迟时间），值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性transition-property。

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: dodgerblue;
        transition-property: width;  /* 设置宽度有过渡效果 */
        transition-duration: 3s;  /* 设置过渡时间为 3s */
        transition-delay: 1s;   /* 设置延迟时间为 1s */ 
    }

    .box:hover {
        width: 300px;  
    }
</style>

<body>
    <div class="box"></div>
</body>

transition-timing-function:

ease 默认值，先加速后减速

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: dodgerblue;
        transition-property: width;
        transition-duration: 3s;
        transition-timing-function: ease;  /* 设置过渡类型,默认为 ease(先加速后减速) */
    }

    .box:hover {
        width: 400px;
    }
</style>

<body>
    <div class="box"></div>
</body>

linear 匀速

transition-timing-function: linear;

ease-in 加速

transition-timing-function: ease-in;

ease-out 减速

transition-timing-function: ease-out;

ease-in-out 先加速后减速，效果比 ease 感觉强烈一些

transition-timing-function: ease-in-out;

cubic-bezier 贝塞尔曲线

transition-timing-function: cubic-bezier(.09, .88, .2, .17);

简写属性 transition:

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

CSS 过渡由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间。

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: dodgerblue;
        /* transition 简写属性 */
        transition: 1s width, 2s height;
    }

    .box:hover {
        width: 400px;
        height: 400px;
    }
</style>

<body>
    <div class="box"></div>
</body>

注意：
在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay

推荐抒写顺序:

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

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

过渡的坑

transition 在元素首次渲染还没有完成的情况下，是不会触发过渡的。
过渡如果写在js 中，则必须写在 onload 函数中，否则在页面中的元素还没有渲染完的情况下不会触发过渡!

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        margin: 100px auto;
        transition: 1s;
    }
</style>
<script>
	/* 在元素还没有完全加载的时候是不会触发过渡的 */
    var box = document.querySelector(".box");
    box.style.width = "300px";
</script>
</head>

<body>
    <div class="box"></div>
</body>

解决方法

<script>
    window.onload = function () {
        var box = document.querySelector(".box");
        box.style.width = "300px";
    };
</script>

2,transition 在绝大部分变换样式切换时，变换组合的个数或位置不一样时，是没有办法触发过渡的

3,过渡只关心元素的初始状态和结束状态，没有方法可以获取到元素在过渡中每一帧的状态

壹零捌壹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transition

transitionTransition 简介：Transition可以设置CSS 属性的过渡效果，它有以下几个属性。transition-property用 nsition-timing-function用于指定过渡的类型 transition-property：是用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用,分隔。默认值为all也就是所有的元素都应用过渡效果。想让容器的宽高有一个过渡的效果的代码：于指定应用过渡属性的名称 ...
复制链接

扫一扫

专栏目录