css+vue实现添加购物车效果
<!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实现添加购物车效果的更多相关文章
- ECSHOP添加购物车加图片飞入效果
为ECSHOP的添加购物车,加入图片飞入效果. 首先: 在goods.dwt中查找添加购物车按钮: 为添加购物车按钮加上id: 例如: <a id="iproduct_{$goods. ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- css 给图片添加滤镜效果，透明层毛玻璃效果
我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果 原图 添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...
- vue-transition实现加入购物车效果及其他动画效果实现
vue提供了<transition></transition>和<transition-group></transition-group>实现元素状态的 ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之添加购物车
一.引言 做京东账户项目中的购物车模块,功能之一就是添加购物车.要用到的是Apach环境,Mysql.PHP以及Ajax. 预计效果:用户点击->"加入购物车" 添加成功 ...
- 如何为你的 Vue 项目添加配置 Stylelint
如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...
- vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 用vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
随机推荐
- 基于MTCNN多任务级联卷积神经网络进行的人脸识别 世纪晟人脸检测
神经网络和深度学习目前为处理图像识别的许多问题提供了最佳解决方案,而基于MTCNN(多任务级联卷积神经网络)的人脸检测算法也解决了传统算法对环境要求高.人脸要求高.检测耗时高的弊端. 基于MTCNN多 ...
- 统计学习三：2.K近邻法代码实现（以最近邻法为例）
通过上文可知k近邻算法的基本原理,以及算法的具体流程,kd树的生成和搜索算法原理.本文实现了kd树的生成和搜索算法,通过对算法的具体实现,我们可以对算法原理有进一步的了解.具体代码可以在我的githu ...
- SpringCloud IDEA 教学 (二) Eureka Service
写在开头 本篇继续介绍基于Eureka的SpringCloud微服务搭建,回顾一下搭建过程, 第一步:建立一个服务注册中心: 第二步:建立微服务并注入到注册中心: 第三步:建立client端来访问微服 ...
- hadoop参数(未完).md
我X,有违禁词.麻烦提醒一下哪个词好吗?
- python3 bytes与hex_string之间的转换
1, bytes to hex_string的转换: def byte_to_hex(bins): """ Convert a byte string to it's h ...
- 推荐形参使用常量引用：void func(const T &);
一.声明为const的原因: 把函数不会改变的形参定义成普通的引用会带给函数的调用者一种误导,即函数可以修改它的实参的值: 限制函数所能接受的实参类型,如不能把const对象.字面值或者需要类型转换的 ...
- Java学习个人备忘录之数组工具类
下面主要讲解一个针对数组操作的工具类. a.java -- 工具类文件 //按理来说要先编译本文件, 然后再编译主函数 class ArrayTool { /* 获取整型数组的最大值 */ publi ...
- ajax的一些实用技巧
1.尽量优先采用ajax获取html文件,然后再操作dom把数据填充到里面 在实际项目中,如果前端开发人员没有把页面给切分开,那么有如下两种办法可供选择:其一是,在各种点击事件中,用js去拼接并在拼接 ...
- OSG学习：自动对齐节点示例
/********************************************************** *Write by FlySky *zzuxp@163.com http://w ...
- Kafka Streams演示程序
本文从以下六个方面详细介绍Kafka Streams的演示程序: Step 1: 下载代码 Step 2: 启动kafka服务 Step 3: 准备输入topic并启动Kafka生产者 Step 4: ...