transition属性

最新推荐文章于 2024-05-03 11:47:20 发布

狡辉两门

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量7.0k

点赞数 4

分类专栏： JS项目文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_46262422/article/details/123823059

版权

JS项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

transition属性

作用

从一种状态过渡到另一种状态，用于在一定的时间内进行元素平滑的过渡，这种效果可以在元素被单击，鼠标滑过，或者是其他的事件中触发，实现圆滑的以动画效果改变CSS属性的属性值。

transition属性是个复合属性，她包括以下几个子属性：

transition-property ：规定设置过渡效果的css属性名称，常用值 “all”全部css属性进行动画效果添加
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线常用值：关键字描述：linear ease-in ease-in-out
transition-delay ：指定开始出现的延迟时间

使用方法

hover效果实现：

div {
	width:200px;
  height:200px;
  background-color:red;
  transition:all .2s linear;   // all => 全部执行 200毫秒内执行完成 以线性方式执行
}

div:hover{
  background-color:yellow;
}

事件的形式进行trainstion属性添加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 200px;
            top: 0px;
        }
    </style>
</head>

<body>

    <div class="box"></div>
    <button id="btn">点击进行transtion属性添加</button>
  
    <script>
     document.getElementById('btn').addEventListener('click', function () {
            var box = document.getElementsByClassName('box')[0]
            box.style.transition = 'all .5s linear'
                box.style.backgroundColor = 'yellow';
                box.style.top = '200px'
        })
    </script>
</body>

</html>

动画结束事件 transitionend

当动画执行完成之后，dom元素会触发transitionend事件

狡辉两门

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
transition属性

transition属性作用从一种状态过渡到另一种状态，用于在一定的时间内进行元素平滑的过渡，这种效果可以在元素被单击，鼠标滑过，或者是其他的事件中触发，实现圆滑的以动画效果改变CSS属性的属性值。transition属性是个复合属性，她包括以下几个子属性：transition-property ：规定设置过渡效果的css属性名称，常用值 “all”全部css属性进行动画效果添加transition-duration ：规定完成过渡效果需要多少秒或毫秒transition-timing-f
复制链接

扫一扫