zoukankan      html  css  js  c++  java
  • CSS3Transition添加多个过渡效果

    本篇文章由:http://xinpure.com/css3transition-to-add-multiple-transition-effects/

    通过监听动画的结束事件,可以为一个元素添加多个动画效果

    监听动画事件

    -webkit-animation 动画有三个事件:开始事件 webkitAnimationStart;结束事件 webkitAnimationEnd;重复运动事件 webkitAnimationIteration

    在之前的一遍文章当中,演示了监听结束事件的效果: CSS3使用Animation为同一个元素添加多个动画效果

    同样的, -webkit-transition 也可以监听到动画事件,但是只能监听到 结束事件 webkitTransitionEnd

    实例

    HTML Code

    <div id="ts_div"></div>

    CSS Code

    #ts_div {
         300px;
        height: 300px;
        margin: 100px auto 0;
        background-color: #000;
        transition: all 1s ease;
    }
    #ts_div:hover {
        transform: translateX(200px);
    }

    JS Code

    var ts_div = document.getElementById("ts_div");
    $("#ts_div").bind("webkitTransitionEnd", function() {
        ts_div.css("transform: translateX(-400px)")
    });

    效果示图

    CSS3Transition添加多个过渡效果

  • 相关阅读:
    11.26
    数组
    JavaScript
    2018.11.26
    input标签
    HPH 函数
    jQuery
    19/1/3数组
    2018/12/26//循环体
    12/25
  • 原文地址:https://www.cnblogs.com/xinpureZhu/p/4598378.html
Copyright © 2011-2022 走看看