CSS 的 transition 实现效果过渡

2条回复
transition 属性设置元素当过渡效果，四个简写属性为：

值 属性 描述
transition-property all,height,width… 规定设置过渡效果的 CSS 属性的名称。
transition-duration 0s+ (单位s) 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function linear,ease,ease-in,ease-out,ease-in-out 规定速度效果的速度曲线。
transition-delay 0s+ (单位s) 定义过渡效果何时开始。

手机展柜动画过渡案例

利用transition过渡，我们可以制作出很多简单转场过渡或一些复杂特效；一般搭配 :hover 使用

<style>
    #transition_box div {
        height: 30px;
        width: 20%;
        border-radius: 0px 15px 15px 0px;
        transition: all 0.5s;
    }
</style>

<body>
    <div id="transition_box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    
    <script>
        let tran_box = document.getElementById('transition_box');
        console.log(tran_box);
        let boxs = tran_box.getElementsByTagName('div');
        console.log(boxs);

        //随机数
        function getRandom(max) {
            return Math.floor(Math.random() * max);
        }
        //随机颜色
        function getRandomColor() {
            let color = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
            let colorAdd = '#';
            while (colorAdd.length <= 6) {
                colorAdd += color[getRandom(12)];
            }
            return colorAdd;
        }
        //事件源 事件捕获
        for (let i = 0; i <= boxs.length - 1; i++) {
            boxs[i].style.backgroundColor = getRandomColor();
            boxs[i].onmouseover=function(){
                this.style.width='60%';
                this.style.height='35px';
                this.style.backgroundColor = getRandomColor();
            }
            boxs[i].onmouseout=function(){
                this.style.width='20%';
                this.style.height='30px';
            }
        }
    </script>
</body>

//鼠标移动到元素上，会出现宽度变化效果

这
是
一
个
动
画
效
果

可设置 属性范围 花费时间 延迟时间 运动曲线

/*选择全部 持续时间为1s，延迟时间为2s 逐渐变慢*/ 
transition:all 1s 2s ease;

不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度:
[1]max-height min-height max-width min-width height width
[2]border-width margin padding outline-width outline-offset
[3]font-size line-height text-indent vertical-align
[4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient

《CSS 的 transition 实现效果过渡》有2个想法

发表回复