用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: 100px;

            transition: all 1s;

            -moz-transition: all 1s;

            -webkit-transition: all 1s;

            -o-transition:all 1s;

        }

        .test:hover{

            background: red;

            width: 200px;

            height: 200px;

        }

    </style>

    <body>

        <div id="div" class="test"></div>

    </body>

</html>

现在如果想用js控制transition过渡动画怎么办呢？
最开始我是想和CSS控制动画一样，直接改变其className，但是发现没有动画效果。
后来经过了一番探索发现，通过dom操作其css属性就行了。

例如div 的css设置如下

div{

    width:200px;

    height:200px;

    transition: all 1s;

}

然后在js中通过dom操作来改变div的css的具体属性，如
obj.style.width="400px"
这时就会触发css的过渡动画。

下例为成功使用Js出发CSS3动画（鼠标点击触发）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style type="text/css">

        .test{

            background: red;

            width: 100px;

            height: 100px;

            transition: all 1s;

            -moz-transition: all 1s;

            -webkit-transition: all 1s;

            -o-transition:all 1s;

        }

    </style>

    <body>

        <div id="div" class="test"></div>

        <script type="text/javascript">

            document.getElementById("div").onclick=function(){

                document.getElementById("div").style.width="200px"

                document.getElementById("div").style.height="200px"

            }

        </script>

    </body>

</html>

一个需要注意的地方：
今天在工作中无意发现，当元素本身为display：none 时，若此时我们想通过js先将其变为display:block 并且随后再触发其他想要的transition过渡效果，需要在 js改变其为display:block 后用setTimeout延迟100ms左右的时间再去设置其他过渡动画，否则该过渡动画不会触发。

有时间我会将其整理成另外一个博文。

用js触发CSS3-transition过渡动画的更多相关文章

  1. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  2. CSS3 transition过渡

    transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...

  3. transition过渡动画

    过渡动画必须写在<transition></transition>标签内,配合其他标签使用. 例子: <transition name="fade" ...

  4. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

  5. CSS3 Transition 过渡

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...

  6. js监听transition过渡事件

    html <div id="mydiv"> </div> style #mydiv{ width:100px; height:100px; backgrou ...

  7. js实现css3的过渡，需要注意的一点（浏览器优化）

    大部分浏览器对元素几何改变时候的重排做了优化.据说是这样子,一定时间内本应多次重排的改变,浏览器会hold住,仅一次重排.其中如果使用分离的一步处理过程,例如计时器,依然多次重排.例如,当我们应用tr ...

  8. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  9. Js点击触发Css3的动画Animations、过渡Transitions效果

    关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...

随机推荐

  1. MVC Core 网站开发（Ninesky） 2.1、栏目的前台显示

    上次创建了栏目模型,这次主要做栏目的前台显示.涉及到数据存储层.业务逻辑层和Web层.用到了迁移,更新数据库和注入的一些内容. 一.添加数据存储层 1.添加Ninesky.DataLibrary(与上 ...

  2. .Net语言 APP开发平台——Smobiler学习日志：如何快速在手机上实现ContextMenu

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...

  3. 自定义鼠标光标cursor

    通过css属性 Cursor:url()自定义鼠标光标. {cursor:url('图标路径'),default;} url是自定义鼠标图标路径 default指的是定义默认的光标(通常是一个箭头), ...

  4. 软件工程（C编码实践篇）学习心得

    孟繁琛 + 原创作品转载请注明出处 + <软件工程(C编码实践篇)>MOOC课程 http://mooc.study.163.com/course/USTC-1000002006 软件工程 ...

  5. 在将 varchar 值 'xinpian' 转换成数据类型 int 时失败?

    把int类型的值修改为varchar类型的值

  6. 烂泥：wiki系统confluence5.6.6安装、中文、破解及迁移

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它 ...

  7. hexo+github搭建个人博客

    最近用hexo+github搭建了自己的个人博客-https://liuyfl.github.io,其中碰到了一些问题,记录下来,以便查阅. hexo+github在win7环境下搭建个人博客:hex ...

  8. oracle 存储过程

    来自:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 I ...

  9. 豪情-CSS解构系列之-新浪页面解构-02

    前言 一.开发工具 - 前端四大利器 1. WebStorm 1). 岂今为止,业界公认的前端开发利器.优点: 2). 缺点 3). 相关资源 4). 后续展望 2. Photoshop 1).基本信 ...

  10. 魅力 .NET：从 Mono、.NET Core 说起

    前段时间,被问了这样一个问题:.NET 应用程序是怎么运行的? 当时大概愣了好久,好像也没说出个所以然,得到的回复是:这是 .NET 程序员最基本的...呵呵! 微软开源,其实不只是对 .NET 本身 ...