vue-transition实现加入购物车效果及其他动画效果实现
下面贴代码
<template>
<div class="transition_test">
<button @click="show = !show">click</button>
// 页面有多个transition时可以加name区分,如果没有加name,默认CSS类名为v-开头
<transition name="slide-fade">
<div v-if="show" class="circle"></div>
</transition>
<div>
</div>
</template> export default {
name: 'myTransition',
components: { },
data() {
return {
show: false
}
},
} <style scoped>
.transition_test {
text-align: left;
padding-bottom: 300px;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: aquamarine;
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all .5s ease-out;
}
.slide-fade-enter, .slide-fade-leave-to {
/* transform: translateX(500px); */
opacity: 0;
}
</style>
<template>
<div class="shop_cart">
加入购物车动画(css实现):
<div class="add">
<button @click="addShopCart">add</button>
<transition name="shop_cart">
<img class="add_img" v-if="addShow" src="../assets/voucher.png" alt="">
</transition>
</div>
<div class="cart">
<img src="../assets/cart.jpg" alt="">
</div>
</div>
</template> export default {
name: 'myTransition',
components: { },
data() {
return {
addShow: false
}
},
methods: {
addShopCart () {
this.addShow = true
// 添加类名的方法没有动画结束的时机,这里我直接写了一个定时器,时机和动画时间一致,在图片移动到购物车位置时隐藏
setTimeout(() => {
this.addShow = false
}, 1000)
}
}
} <style scoped>
.transition_test {
text-align: left;
padding-bottom: 300px;
}
.shop_cart {
padding: 20px;
}
.shop_cart .add {
position: relative;
margin-top: 100px;
width: 500px;
display: inline-block;
}
.shop_cart .add button {
position: absolute;
z-index: 99;
}
.shop_cart .cart{
width: 300px;
display: inline-block;
}
.shop_cart .cart img {
width: 100%;
}
// 一开始调整好商品图片在购物车的位置,移入效果最后显示是在一开始定义好的位置
.shop_cart .add_img {
width: 100px;
position: absolute;
left: 600px;
top: -160px;
}
// 可以有两种方式实现飞入动画,用动画的效果感觉会更好一点
/* 动画效果实现 */
/* @keyframes bounce-in {
0% {
transform: scale(1);
transform: translate(-610px, 100px);
}
100% {
transform: scale(.5);
transform: translate(0px, 0px);
}
}
.shop_cart-enter-active {
animation: bounce-in 1s;
} */ /* CSS类名实现 */
.shop_cart-enter-active {
transition: all 1s ease-out;
}
.shop_cart-enter {
opacity: 0;
transform: scale(.5);
transform: translate(-610px, 100px);
}
</style>
<template>
<div class="transition_test">
<h2> 过渡效果</h2> <button @click="show = !show">click</button>
<!-- <transition name="slide-fade">
<div v-if="show" class="circle"></div>
</transition> -->
<div>
图片放大效果:
<transition name="img-fade">
<img class="bigimg" v-if="show" src="../assets/voucher.png" alt="">
</transition>
</div>
<div class="shop_cart">
加入购物车动画(css实现):
<div class="add">
<button @click="addShopCart">add</button>
<transition name="shop_cart">
<img class="add_img" v-if="addShow" src="../assets/voucher.png" alt="">
</transition>
</div>
<div class="cart">
<img src="../assets/cart.jpg" alt="">
</div>
</div> <div class="shop_cart">
加入购物车动画(JavaScript钩子函数实现):
<div class="add">
<button @click="addShopCart1">add</button>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
<img class="add_img_js" v-if="addShow1" src="../assets/voucher.png" alt="">
</transition>
</div>
<div class="cart">
<img src="../assets/cart.jpg" alt="">
</div>
</div>
<!-- 动画数组效果 -->
<ul class="group_list">
<button @click="addItem">addItem</button>
<button @click="removeItem">removeItem</button>
<transition-group name="list">
<li class="group_item" v-for="item in list" :key="item">{{item}}</li>
</transition-group>
</ul>
</div>
</template>
<script>
export default {
name: 'myTransition',
components: { },
data() {
return {
show: false,
addShow: false,
addShow1: false,
list: [1, 2, 3]
}
},
created() { }, methods: {
addShopCart () {
this.addShow = true
setTimeout(() => {
this.addShow = false
}, 1000)
},
addShopCart1 () {
this.addShow1 = true
}, // 动画钩子函数
// 进入前状态
beforeEnter (el) {
el.style.left = '-20px'
el.style.top = '-15px'
el.style.transform = 'scale(1)'
},
// 进入中
enter (el, done) {
// 需要调用元素的offset操作,才有过渡的效果,否则会马上实现过渡
el.offsetWidth
el.style.left = '600px'
el.style.top = '-160px'
el.style.transform = 'scale(.5)'
done()
},
// 进入后
afterEnter () {
this.addShow1 = false
}, // 新增
addItem () {
this.list.push(this.list.length + 1)
},
// 删除
removeItem () {
if (this.list.length > 1) {
this.list.pop()
}
}
} }
</script>
<style scoped>
.transition_test {
text-align: left;
padding-bottom: 300px;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: aquamarine;
}
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all .5s ease-out;
}
.slide-fade-enter, .slide-fade-leave-to {
/* transform: translateX(500px); */
opacity: 0;
}
.bigimg {
width: 300px;
} .img-fade-enter-active {
transition: all 1s ease-out;
}
.img-fade-enter {
transform: scale(.5);
/* width: 50px; */
} .shop_cart {
padding: 20px;
}
.shop_cart .add {
position: relative;
margin-top: 100px;
width: 500px;
display: inline-block;
}
.shop_cart .add button {
position: absolute;
z-index: 99;
}
.shop_cart .cart{
width: 300px;
display: inline-block;
}
.shop_cart .cart img {
width: 100%;
}
.shop_cart .add_img {
width: 100px;
position: absolute;
left: 600px;
top: -160px;
}
/* 动画效果实现 */
/* @keyframes bounce-in {
0% {
transform: scale(1);
transform: translate(-610px, 100px);
}
100% {
transform: scale(.5);
transform: translate(0px, 0px);
}
}
.shop_cart-enter-active {
animation: bounce-in 1s;
} */ /* CSS类名实现 */
.shop_cart-enter-active {
transition: all 1s ease-out;
}
.shop_cart-enter {
opacity: 0;
transform: scale(.5);
transform: translate(-610px, 100px);
}
// JavaScript函数
.shop_cart .add_img_js {
width: 100px;
position: absolute;
left: 600px;
top: -160px;
transition: all 1s;
}
// 动态列表
.group_list {
padding: 30px;
}
.group_list .group_item {
width: 200px;
height: 100px;
border: 1px solid orangered;
margin: 10px;
}
.list-enter-active, .list-leave-active {
transition: all .8s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateX(40px);
}
</style>
vue-transition实现加入购物车效果及其他动画效果实现的更多相关文章
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- transition:all 0.5s linear;进度条动画效果 制作原理
Html: <span class="progress"><b ><i></i></b><em>50< ...
- vue工程化:返回顶部和底部的动画效果
. <template> <div> <div class="scroll" :class="{show:isActive}"&g ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- Vue过渡和动画效果展示(案例、GIF动图演示、附源码)
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- CSS3 transition实现超酷图片墙动画效果
一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...
- ios 动画效果CATransition笔记
初学ios开发,很多概念还不清楚,所以只有边学边做例子.又怕学了后面忘了前面,因此用自己的博客来纪录自己的学习历程,也是对自己学习不要懈怠做个监督. 刚学ios做动画效果.因为ios封装得很好,实现i ...
- Android动画效果之自定义ViewGroup添加布局动画
前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通 ...
- Android动画效果之Property Animation进阶(属性动画)
前言: 前面初步认识了Android的Property Animation(属性动画)Android动画效果之初识Property Animation(属性动画)(三),并且利用属性动画简单了补间动画 ...
随机推荐
- 编写javad代码实现使用Scanner从键盘读取一行输入,去掉其中重复字符, 打印出不同的那些字符
package com.loaderman.test; import java.util.HashSet; import java.util.Scanner; public class Test2 { ...
- LoaderDialog自定义加载框的实现
package com.loaderman.loadingdialogdemo; import android.app.Dialog; import android.content.Context; ...
- 利用Bag中的getCount()方法统计list集合中重复元素
实际应用场景:从Excel导入数据时,存在某个标识符相同的多条数据,需要进行合并,因此需要统计重复元素,可以利用Bag包下的getCount()进行统计,代码如下: package test.com. ...
- (2)网络基础之IP
IP分为IPV4和IPV6. 以下只讲IPV4,IPV6后期会重新分出来 (以下均为个人理解,如果有误,欢迎提出.也希望如果转载,能通知我并注明转载信息,毕竟字也是我一个个码出来的.谢谢) IPV4地 ...
- C#编程 委托 Lambda表达式和事件
委托 如果我们要把方法当做参数来传递的话,就要用到委托.简单来说委托是一个类型,这个类型可以赋值一个方法的引用. 声明委托 在C#中使用一个类分两个阶段,首选定义这个类,告诉编译器这个类由什么字段和方 ...
- C#编程 socket编程之unity聊天室
上面我们创建了tcp的客户端和服务端,但是只能进行消息的一次收发.这次我们做一个unity的简易聊天室,使用了线程,可以使用多个客户端连接服务器,并且一个客户端给服务器发消息后,服务器会将消息群发给所 ...
- linux查询日志命令总结
[背景] 排查线上环境问题,少不了去线上查日志.而使用什么命令,能快速准确地查到我们需要查找地日志信息,也是我们需要掌握的一项技能. [命令] Linux查看命令有多种:tail,head,cat,t ...
- Leetcode之动态规划(DP)专题-338. 比特位计数(Counting Bits)
Leetcode之动态规划(DP)专题-338. 比特位计数(Counting Bits) 给定一个非负整数 num.对于 0 ≤ i ≤ num 范围中的每个数字 i ,计算其二进制数中的 1 的数 ...
- DQN算法原理详解
一. 概述 强化学习算法可以分为三大类:value based, policy based 和 actor critic. 常见的是以DQN为代表的value based算法,这种算法中只有一个值函数 ...
- mysql——插入、更新、删除数据(概念)
一.插入数据 1.为表的所有字段插入数据 -------------------------------------------------------------------------- (1)i ...