用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. 从0开始搭建SQL Server AlwaysOn 第四篇（配置异地机房节点）

    从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...

  2. 3.Windows Server 2012 R2数据库部署

    很多人竟然不会安装数据库....好吧,来个图文教程,其实和windows里面一样安装,和安装2008一样的 先安装3.5:http://www.cnblogs.com/dunitian/p/53487 ...

  3. 开始学nodejs——net模块

    net模块的组成部分 详见 http://nodejs.cn/api/net.html 下面整理出了整个net模块的知识结构,和各个事件.方法.属性的用法 net.Server类 net.Socket ...

  4. Linux平台 Oracle 10gR2（10.2.0.5）RAC安装 Part2：clusterware安装和升级

    Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part2:clusterware安装和升级 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 3.安装Clus ...

  5. Effective java笔记（二），所有对象的通用方法

    Object类的所有非final方法(equals.hashCode.toString.clone.finalize)都要遵守通用约定(general contract),否则其它依赖于这些约定的类( ...

  6. ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知

    一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...

  7. 游走 bzoj 3143

    游走(2s 128MB)walk [问题描述] [输入格式] [输出格式] [样例输入] 3 3 2 3 1 2 1 3 [样例输出] 3.333 [样例说明] 题解: 主要算法:贪心:高斯消元: 题 ...

  8. 2016/12/31_Python

    今天学习主要内容: Python: 1.with语句(补充昨天的文件操作) 用with打开的文件在脚本结束会自动关闭,以防普通打开方式忘记关闭文件连接 语法: with open("demo ...

  9. 从国内流程管理软件市场份额看中国BPM行业发展

    随着互联网+.中国制造2025.工业4.0等国家战略的支持与引导,企业在数字经济时代的信息化表现惊人,越来越多企业认识到,对于企业的发展来说,信息自动化远远还不够,企业的战略.业务和IT之间需保持高度 ...

  10. maven的pom.xml关系依赖书写顺序

    今天遇到了一个情况,以前代码编译没有问题,升级了hbase客户端phoenix驱动,又调整了thrift的关系依赖的位置,放到了这个驱动后面. 如下: 导致了一个thrift接口类编译报错: 检查这个 ...