zoukankan      html  css  js  c++  java
  • Bootstrap入门(二十五)JS插件2:过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果

    对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译(或压缩)版的bootstrap.js 文件,就无需再单独将其引入了。

    Transition.js 是针对 transitionEnd 事件的一个基本辅助工具,也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。

    通过代码啦展现一下

    先创建一个有id的div,这里div的id为mydiv,内容直接为空

            <div id="mydiv">
                
            </div>

    为他添加一些样式,#mydiv下的是刚打开页面时的样式,而#mydiv:hover是鼠标滑过时的样式

    宽度变成原来的四倍,红色的,2s完成

             <style>
                #mydiv{
                    width: 100px;
                    height: 100px;
                    background: red;
                    -webkit-transition: width 2s;
                    transition: width 2s;
                }
                #mydiv:hover{
                    width: 400px;
                }
            </style>

    然后,为这个过渡效果写一些js代码

            <script>           
             document.getElementById(
    "mydiv").addEventListener("transitionend",function(e){ this.innerHTML = "过渡事件,完成" }) </script>

    初始效果

    鼠标滑过时:渐渐变宽

    最终,显示文字

  • 相关阅读:
    Redis 代理 twemproxy
    redis sentinel 集群监控 配置
    RabbitMQ 消息队列 配置
    codis 新版本 CodisLabs 编译安装
    CentOS7 开源跳板机(堡垒机) Jumpserver
    tomcat 优化配置 java-8 tomcat-7
    CentOS 7 安装配置 NFS
    CentOS 7 x64 安装 Ceph
    自动化运维 Ansible
    Java之数据类型讲解
  • 原文地址:https://www.cnblogs.com/hnnydxgjj/p/5910606.html
Copyright © 2011-2022 走看看