js_demo 过渡结束事件 transitionend

一时失言乱红尘 2023-02-20 12:21 7阅读 0赞

#### js\_demo 过渡结束事件 transitionend ####

![在这里插入图片描述][20200626224325250.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            
            div { 
                width: 150px;
                height: 150px;
                background: pink;
            }
        </style>
    </head>
    
    <body>
        <button>点击</button>
        <div></div>
        <script>
            // 需求：当元素div运动完毕后，背景色变为蓝色（不渐变）
            var btn = document.querySelector('button');
            var div = document.querySelector('div');
            btn.onclick = function() { 
                div.style.transform = 'translateX(100px)';
                div.style.transition = '2s linear';
            };
            // 过度结束事件
            div.addEventListener('transitionend', function() { 
                div.style.background = 'blue';
                div.style.transition = 'none';
            });
        </script>
    </body>
    
    </html>

[20200626224325250.gif_pic_center]: https://img-blog.csdnimg.cn/20200626224325250.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 Camunda 7.x 系列【29】结束事件

> 有道无术，术尚可求，有术无道，止于术。 > > 本系列Spring Boot 版本 2.7.9 > > 本系列Camunda 版本 7.19.0 > > 源码地址

Dear 丶/ 2023年10月15日 10:32/ 0 赞/ 65 阅读

相关 js_demo 过渡结束事件 transitionend

js\_demo 过渡结束事件 transitionend ![在这里插入图片描述][20200626224325250.gif_pic_center] <!D

一时失言乱红尘/ 2023年02月20日 12:21/ 0 赞/ 8 阅读

相关 Cocos2dx 3.0 过渡篇（二）事件回调

尊重原创，转载请注明来自：star特530的CSDN博客 [http://blog.csdn.net/start530/article/details/18216679][ht

叁歲伎倆/ 2022年08月27日 01:29/ 0 赞/ 167 阅读

相关 JS学习47：transitionend 事件的折腾

1、引子如上，单击方块的运行结果应该是什么呢？在高级浏览器下测试的结果是：1、2，符合预期。通常，dom元素上的事件名称，比如“onclick、onmousedow

女爷i/ 2022年07月15日 11:16/ 0 赞/ 90 阅读

相关 JS学习47：transitionend 事件的折腾

1、引子如上，单击方块的运行结果应该是什么呢？在高级浏览器下测试的结果是：1、2，符合预期。通常，dom元素上的事件名称，比如“onclick、onmousedow

桃扇骨/ 2022年07月15日 11:16/ 0 赞/ 158 阅读

相关 Unity 动画结束事件

在用Unity开发游戏动画播到某一帧就要干什么事情. 希望能得到回调. 函数名字记得在使用这个动画的物体的脚本里面写好，否则会报错。用你的鼠标在时间上点一下

雨点打透心脏的1/2处/ 2022年06月13日 10:15/ 0 赞/ 413 阅读

相关 6、过渡

在css3中新增加了过渡功能，用来设置元素从一种样式变为另一种样式时过渡的动态效果。下面分别介绍实现过渡功能的几个属性 1、transition-property tra

不念不忘少年蓝@/ 2022年04月22日 03:22/ 0 赞/ 99 阅读

相关 VUE过渡（一)单元素过渡

VUE过渡（一)单元素过渡转载[https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v

叁歲伎倆/ 2022年01月29日 13:19/ 0 赞/ 323 阅读

相关过渡 - transition

过渡 - `transition` 是变形`transfrom`其中一种效果，定义为一种状态过渡到另一种状态的过程，今天学习到css3动画，特此记录下过渡的使用和一些效果。

我会带着你远行/ 2022年01月12日 04:37/ 0 赞/ 334 阅读

相关移动端事件touchstart touchmove touchend 动画事件过渡事件

在移动端新增了touch事件，因为手指的行为叫做“触摸”，鼠标的行为叫做“点击” 但是它仍然支持点击事件，有300ms的延迟，检测是否双击移动端的三个事件 tou

深碍√TFBOYSˉ_/ 2021年09月02日 07:17/ 0 赞/ 498 阅读