vue-cli 中实现简单动画效果 (vue2.0)
2017-01-11 09:38
1166 查看
1,写一个简单的headcomp组件如下:
<template>
<div class="box">
<transition name="move">
<button @click = "decrease" v-show="home.count>0" class="decrease">我是减法</button>
</transition>
<div class="num" > {{home.count}} </div>
<button @click = "add" >我是加法</button><br><br>
</div>
</template>
<script>
export default{
// 使用props接收传过来的数据
props:{
home:{
type:Object,
}
},
methods:{
decrease:function(){
if(!this.home.count){
this.home.count = 1;
}else{
this.home.count--;
}
},
add:function(){
if(!this.home.count){
this.home.count = 1;
}else{
this.home.count++;
}
}
}
}
</script>
<style>
div>button,.num{
display: inline-block;
}
div>button{
border:none;
background:#41b883;
color:#fff;
padding:5px 20px;
margin:0 20px;
}
.box{
width:400px;
position: relative;
}
.decrease{
position: absolute;
left:30px;
transition:all 0.3s linear;
}
.add{
position: absolute;
right:0;
}
//以下的类,是执行动画时产生的,可以根据动画执行开始/结束,设置不同状态时候的样式
.move-transition{
opacity: 1;
transform: translate3d(0,0,0);
}
.move-enter-active,.move-leave-active{
opacity: 0;
transform: translate3d(5px,0,0);
}
</style>
2,图示
3,效果:当count>0 : 向左移动,透明度从0-1;当count<0 : 向右移动,透明度从1-0。
<template>
<div class="box">
<transition name="move">
<button @click = "decrease" v-show="home.count>0" class="decrease">我是减法</button>
</transition>
<div class="num" > {{home.count}} </div>
<button @click = "add" >我是加法</button><br><br>
</div>
</template>
<script>
export default{
// 使用props接收传过来的数据
props:{
home:{
type:Object,
}
},
methods:{
decrease:function(){
if(!this.home.count){
this.home.count = 1;
}else{
this.home.count--;
}
},
add:function(){
if(!this.home.count){
this.home.count = 1;
}else{
this.home.count++;
}
}
}
}
</script>
<style>
div>button,.num{
display: inline-block;
}
div>button{
border:none;
background:#41b883;
color:#fff;
padding:5px 20px;
margin:0 20px;
}
.box{
width:400px;
position: relative;
}
.decrease{
position: absolute;
left:30px;
transition:all 0.3s linear;
}
.add{
position: absolute;
right:0;
}
//以下的类,是执行动画时产生的,可以根据动画执行开始/结束,设置不同状态时候的样式
.move-transition{
opacity: 1;
transform: translate3d(0,0,0);
}
.move-enter-active,.move-leave-active{
opacity: 0;
transform: translate3d(5px,0,0);
}
</style>
2,图示
3,效果:当count>0 : 向左移动,透明度从0-1;当count<0 : 向右移动,透明度从1-0。
相关文章推荐
- vue2.0 中使用transition实现动画效果使用心得
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- vue-cli 路由 实现类似tab切换效果(vue 2.0)
- vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果
- vue2.0使用动态组件实现tab切换效果(vue-cli)
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- SurfaceView与Canvas的结合实现简单的图形绘制与动画效果
- iOS --用CABasicAnimation实现简单的动画效果
- Tab切换动画滑动效果的一个简单实现
- Android 简单的实现进度条自增动画效果
- Mono For Android中简单实现按钮的动画效果
- ios气泡动画效果的简单实现
- iOS-实现简单的动画效果
- 使用NSTimer与iphone的简单动画,实现飘雪效果
- 简单CSS技巧实现的Logo动画效果(很像导航栏上经常运用的效果,但有差别)
- 自定义实现ExpandableListView收缩的简单动画效果
- ListView之简单动画效果实现
- Jquery实现简单的动画效果代码
- iphone--使用NSTimer与iphone的简单动画,实现飘雪效果
- Java之简单的图片动态显示(实现类似GIF动画效果)