zoukankan      html  css  js  c++  java
  • 移动端实现弹出框渐显和渐隐效果

    在移动端想实现一个弹出框渐渐出现和消失的效果。由于用的是vue.js,所以写法有些独特,用
    变量控制是否显示类名。
    但是核心解决方法就是CSS3的animation属性应用
    还有CSS中的z-index应用,必须初始化定义让弹出框在最底部。
    还有就是opacity属性的应用,这样才有渐健弹出和渐渐消失的效果。
    给弹出框3个css类,本身一个,弹出时一个和消失的时候一个。
    JS方面很简单,就是2个css类之间的切换,注意本身初始化的类要一直保留。

    html:
    <div class="index-set" v-bind:class="{'show-index':indexSetShow ,'fade-index':indexSetFade}">
    </div>

    css:
    .index-set{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    90vw;
    height:auto;
    background:#fff;
    border:2px solid #dfdfdf;
    z-index:-100;
    }

    /****渐渐隐藏出现样式****/
    .show-index{
    animation:show 0.36s ease 0s;
    animation-fill-mode:both;
    }

    .fade-index{
    animation:fade 0.36s ease 0s;
    animation-fill-mode:both;
    }

    @keyframes show{

      from{
        opacity:0;
      }
      50%{
        opacity:0.5;
      }
      to{
        opacity:1;
        z-index:888;
      }
    }

    @keyframes fade{
      from{
        opacity:1;
        z-index:888;
      }
      50%{
        opacity:0.5;
      }
      to{
        opacity:0;
        z-index:-100;
      }
    }

  • 相关阅读:
    linux卸载rpm包
    Centos6.3手动rpm安装gcc,c++
    阿里云服务器挂载分区
    linux下svn目录管理
    mac搭建cordova的android环境
    mac下搭建cordova开发环境
    程序员除了写代码还可以做点啥
    php之soap使用
    linux中找不到/etc/sysconfig/iptables
    const 位置不一样导致的变化
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/10059840.html
Copyright © 2011-2022 走看看