vue-cli 中实现简单动画效果 (vue2.0)
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。
vue-cli 中实现简单动画效果 (vue2.0)的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- 总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)
总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■ CLI是Command-Lin ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- JQuery(二)——简单动画效果
上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...
- css3中outline切换动画效果
今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> < ...
- Vue CLI 3.x 简单体验
文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...
- ListView中内容的动画效果
LayoutAnimationController用于为一个layout里面的控件,或者是一个ViewGroup里面的控件设置动画效果,可以在XML文件中设置,亦可以在Java代码中设置. 一种直接在 ...
随机推荐
- 13.FutureTask异步计算
FutureTask 1.可取消的异步计算,FutureTask实现了Future的基本方法,提供了start.cancel 操作,可以查询计算是否完成,并且可以获取计算 的结果.结果 ...
- Orchard运用 - 整合多说评论插件
曾经我在一随笔讲述如何整合第三方Disqus评论插件,不过这一插件不是本土,对中国客户毕竟有点别扭.比如这一随笔就提到为啥要选择多说 - 另外一个国内比较知名的评论插件. 今天跟大家分享如何用最简单的 ...
- 各浏览器CSS兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...
- 【中英】mac电脑清理软件 ToolWiz Mac Boost
简单介绍: ToolWiz Mac Boost是一款适用于Mac电脑清理加速最好的终极应用, 使您的Mac电脑干净有条理, 执行飞速且稳定.始终保持最佳状态! ToolWiz Mac Boost 运用 ...
- 非阻塞I/O
http://blog.163.com/tyw_andy/blog/static/1167902120099163252164/ 套接口缺省是阻塞的.这一点意味着当发出一个不能立即完成的套接口调用时, ...
- 解决Android 5.1系统以上通知状态栏小图标仅仅显示白色问题
看上图,想必大家都有遇到过吧.近期俺也遇到了,找到了解决方法,如今分享下也做个记录哈. 问题发生的规则是Android5.1或者以上的手机系统使用了非常多的颜色的通知图标,就会出现,怎么解决呢,非常e ...
- 关于Csdn水区被占据一事 (2015-08-01)
例如以下图所看到的 水区被占据 ,假设发贴机不仅仅在水区发贴.也在其他版块也发贴,将不堪设想啊各位. 如今非常多站点也经历过被 注冊机,发贴机,乱炸,是非常可恨的事.可是您想想.为什么注冊机.发贴机会 ...
- js与jQuery方法对比
javascript与jQuery方法对比jquery对象转dom对象 // 方式一(推荐使用) $("input")[0] // 方式二 $("input" ...
- Java多线程具体解释
Java多线程具体解释 多线程简单介绍 概述 多线程(multithreading).是指从软件或者硬件上实现多个线程并发运行的技术.具有多线程能力的计算机因有硬件支持而可以在同一时间运行多于一个线程 ...
- android源码相关网站
https://android.googlesource.com/ google的android源码网站 http://source.android.com/ android网站 git://code ...