<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>

        * {

            margin: 0;

            padding: 0

        }

        .btn {

            padding: 6px 12px;

            background: #4ee58e;

            border: none;

            border-radius: 6px;

            color: #fff

        }

        .main-content {

            width: 100%;

            height: 900px;

            background: #abd6c6;

            color: #333;

        }

        .popup {

            position: fixed;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            /*visibility: hidden*/

        }

        .visible {

            visibility: visible

        }

        .hidden {

            visibility: hidden

        }

        .popup .popup-mask {

            position: fixed;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            background-color: rgba(0, 0, 0, .6)

        }

        .popup .popup-content {

            position: fixed;

            bottom: 0;

            left: 0;

            right: 0;

            height: 50%;

            background: #ff6579;

            overflow: auto

        }

        .animated {

            animation-duration: 1s;

            animation-fill-mode: both

        }

        @keyframes slideOutDown {

            0% {

                transform: translateZ(0)

            }

            to {

                visibility: hidden;

                transform: translate3d(0, 100%, 0)

            }

        }

        .slideOutDown {

            animation-name: slideOutDown;

            visibility: visible

        }

        @keyframes slideInUp {

            0% {

                transform: translate3d(0, 100%, 0);

                visibility: visible

            }

            to {

                transform: translateZ(0)

            }

        }

        .slideInUp {

            animation-name: slideInUp;

            visibility: visible

        }

    </style>

</head>

<body>

<div id="goods">

    <div class="main-content">

        <button class="btn" @click="toggle">点击出现</button>

        页面内容

    </div>

    <div class="popup hidden" :class="{visible:this.showflag}">

        <div class="popup-mask"></div>

        <div class="popup-content animated" :class="slide">

            <button class="btn" @click="toggle">点击消失</button>

            <div style="height: 800px;border: 1px red solid;">页面内容</div>

        </div>

    </div>

</div>

<script src="js/vue.min.js"></script>

<script>

    var goods = new Vue({

        el: '#goods',

        data: {

            showflag: false,

            init: false

        },

        computed: {

            slide: function () {

                if (!this.init) {

                    return '';

                } else if (this.showflag) {

                    return 'slideInUp';

                } else {

                    return 'slideOutDown';

                }

            }

        },

        methods: {

            toggle: function () {

                this.init = true;

                this.showflag = this.showflag ? false : true;

            }

        }

    });

</script>

</body>

</html>

css+vue实现添加购物车效果的更多相关文章

  1. ECSHOP添加购物车加图片飞入效果

    为ECSHOP的添加购物车,加入图片飞入效果. 首先: 在goods.dwt中查找添加购物车按钮: 为添加购物车按钮加上id: 例如: <a id="iproduct_{$goods. ...

  2. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  3. css 给图片添加滤镜效果，透明层毛玻璃效果

    我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果 原图 添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...

  4. vue-transition实现加入购物车效果及其他动画效果实现

    vue提供了<transition></transition>和<transition-group></transition-group>实现元素状态的 ...

  5. 【京东账户】——Mysql/PHP/Ajax爬坑之添加购物车

    一.引言 做京东账户项目中的购物车模块,功能之一就是添加购物车.要用到的是Apach环境,Mysql.PHP以及Ajax. 预计效果:用户点击->"加入购物车"  添加成功 ...

  6. 如何为你的 Vue 项目添加配置 Stylelint

    如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...

  7. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  8. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  9. Vue中的动画效果

    Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...

随机推荐

  1. KVM存储虚拟化---玩转openstack

    KVM 的存储虚拟化是通过存储池(Storage Pool)和卷(Volume)来管理的. Storage Pool 是宿主机上可以看到的一片存储空间,可以是多种类型,后面会详细讨论.Volume 是 ...

  2. 三：Fair Scheduler 公平调度器

    参考资料: http://hadoop.apache.org/docs/current/hadoop-yarn/hadoop-yarn-site/FairScheduler.html http://h ...

  3. 将footer固定在页面最下方

    方法一: HTML结构: <div id="id_wrapper"> <div id="id_header"> Header Block ...

  4. 关于localStorage的实际应用

    在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...

  5. 软件管理——rpm&dpkg、yum&apt-get

    一般来说著名的linux系统基本上分两大类: 1. RedHat系列:Redhat.Centos.Fedora等 2. Debian系列:Debian.Ubuntu等 一.RedHat 系列     ...

  6. Alpha发布——视频展示

    一.视频链接 http://v.youku.com/v_show/id_XMzEyODQzNzQ2MA==.html 二.视频文案说明 你是不是还在为软工作业奋笔疾书? 你是不是无法及时查看最新博客信 ...

  7. Java核心技术点之接口

    1. 为什么使用接口 Java中的接口是一组对需求的描述.接口通过声明接口方法来对外宣布:“要想具有XX功能,就得按我说的做(即实现接口方法).” 而接口的实现类通过实现相应接口的方法来宣布:“我已经 ...

  8. 团队作业7——第二次项目冲刺（Beta版本)-第二篇

    1.工作分工: 团队成员 分工 郭达22120 项目整合,后台代码 刘德培44060 数据库模块 石浩洋22061 前台界面优化 曾繁钦22056 前台界面优化.测试 孙斌22030 后台代码 2.燃 ...

  9. 【Linux】- CentOS搭建FTP服务器

    1.安装vsftpd yum install -y vsftpd 2.启动vsftpd服务 service vsftpd start 3.查看运行状态 netstat -nltp | 完毕!!! 参考 ...

  10. overflow:scroll 滚动条不显示

    overflow:scroll 滚动条不显示 ::-webkit-scrollbar-thumb 可能因为 自定义的滚动条height比元素可展示内容大