用js触发CSS3-transition过渡动画

最新推荐文章于 2024-08-29 19:30:00 发布

pspgbhu

最新推荐文章于 2024-08-29 19:30:00 发布

阅读量3.7w

点赞数 6

分类专栏： Web前端文章标签： css3 动画 javascript

本文链接：https://blog.csdn.net/pspgbhu/article/details/51448655

版权

本文探讨如何结合JavaScript和CSS3实现更灵活的动画控制。通过改变DOM元素的CSS属性，可以触发transition过渡效果。文章指出，直接改变className可能无法看到动画，而应该直接操作样式属性。还提醒注意CSS3的兼容性问题，特别是在display属性切换时，可能需要通过延迟设置其他过渡动画以确保正确触发。

摘要由CSDN通过智能技术生成

用js触发CSS3-transition过渡动画

经过这几天的工作，让我进一步的了解到CSS3的强大，原本许多需要js才能实现的动画效果，现在通过CSS3就能轻易实现了，但是CSS3也有自身的不足，例如说在动画出发触发上就没有js灵活，因此我就开始考虑将CSS3与Js结合使用。

不过要注意CSS3属性兼容性问题

平时我们直接使用transition动画一般是这样的

鼠标放置在div方块上触发动画效果（鼠标悬浮div上即可触发）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        .test{
            background: red;
            width: 100px;
            height: 100

最低0.47元/天解锁文章

pspgbhu

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
7
评论
用js触发CSS3-transition过渡动画

经过这几天的工作，让我进一步的了解到CSS3的强大，原本许多需要js才能实现的动画效果，现在通过CSS3就能轻易实现了，但是CSS3也有自身的不足，例如说在动画出发触发上就没有js灵活，因此我就开始考虑将CSS3与Js结合使用。平时我们直接使用transition动画一般是这样的鼠标放置在div方块上触发动画效果（鼠标悬浮div上即可触发）
复制链接

扫一扫

专栏目录