JS 怎么动态设置CSS3动画的样式

JavaScript028

JS 怎么动态设置CSS3动画的样式,第1张

引入jquery

然后给你要设置动画的对象增加或者删除css3动画的类就可以了。

如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Test</title>

    <style type="text/css">

        body{

            padding: 20px

            background-color:#FFF

        }

        .colorchange

        {

            animation:myfirst 5s

            -moz-animation:myfirst 5s /* Firefox */

            -webkit-animation:myfirst 5s /* Safari and Chrome */

            -o-animation:myfirst 5s /* Opera */

        }

        @keyframes myfirst

        {

            from {background:red}

            to {background:yellow}

        }

        @-moz-keyframes myfirst /* Firefox */

        {

            from {background:red}

            to {background:yellow}

        }

        @-webkit-keyframes myfirst /* Safari and Chrome */

        {

            from {background:red}

            to {background:yellow}

        }

        @-o-keyframes myfirst /* Opera */

        {

            from {background:red}

            to {background:yellow}

        }

        #main{

            width:100px

            height:100px

            background:red

        }

        #cgbt{

            width: 100px

            margin: 20px 0 0 0

            text-align: center

            cursor: pointer

        }

        #cgbt:hover{

            background-color: #2D93CA

        }

    </style>

</head>

<body>

<div id="main">

    我会变么？

</div>

<div id="cgbt">

    点我让上面的变颜色

</div>

<script src="jquery-3.2.1.min.js" type="application/javascript"></script>

<script>

    $(document).ready(function(){

        $("#cgbt").click(function(){

            $("#main").attr("class","colorchange")

        })

    })

</script>

</body>

</html>

Fabric.js 提供了2个方法删除对象。

一个是 直接删除 ，另一个方法是 带过渡动画 删除元素（淡出动画）。

本文重点讲 带过渡动画 删除元素的方法，还会讲到设置 过渡时长 、删除后的 回调函数 等知识点。

删除元素的2种方法：

设置动画时长：

remove 很好理解，就是删除的意思。里面传入元素对象即可。

在 canvas.renderOnAddRemove 为 true 的情况下，使用 canvas.remove 删除元素后，画布会自动刷新。

canvas.renderOnAddRemove 默认值是 true

如果 canvas.renderOnAddRemove = false ，使用 canvas.remove 后，元素是删除了，但画布上还能看到元素。

此时需要手动执行 canvas.renderAll() 或者其他刷新方法，刚刚被删的元素才会从画布上(视觉上)消失。

fxRemove 是一个带过渡动画的删除方法，使用该方法删除的对象会淡出，直至消失。

这个方法 第一个参数 是要删除的对象；

第二个参数 是回调对象，这个对象里有2个值，是类型函数。

分别是 onChange 和 onComplete 。

canvas.FX_DURATION 可以设置过渡动画的时长。

默认值是 500 ，单位是 毫秒

修改后 canvas.FX_DURATION 后，再试试 canvas.fxRemove ，删除元素的过渡时长就是你设置的时长。

⭐《Fabric.js 将本地图像上传到画布背景》

⭐《Fabric.js 从入门到膨胀》

《Fabric.js 渐变效果（包括径向渐变）》

《Fabric.js 3个api设置画布宽高》

⭐《Fabric.js 自定义右键菜单》

《Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）》

如果本文内容对你有所帮助，也请你帮我点个赞呗