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代码中设置. 一种直接在 ...
随机推荐
- 深度学习文档 DeepLearning 0.1 documentation
Contents LICENSE Deep Learning Tutorials Getting Started Download Datasets Notation A Primer on Supe ...
- python的单元测试框架
1.unittest是Python内置的标准类库.它的API跟Java的JUnit..net的NUnit,C++的CppUnit很相似. 通过继承unittest.TestCase来创建一个测试用 ...
- [gevent源代码分析] 深度分析gevent执行流程
一直对gevent执行流程比較模糊,近期看源代码略有所得.不敢独享.故分享之. gevent是一个高性能网络库,底层是libevent,1.0版本号之后是libev.核心是greenlet.geven ...
- 关于vs2013调试的偶然错误发现与总结(vs2013的承载进程)---ShinePans
当项目的属性选择为 启用 vs2013承载进程 或出现一下错误: 尝试运行项目时出错:未能加载文件或程序集"GroupBoxTest" 或它的某一个依赖项.给定程序集名称" ...
- C#模拟MSN窗体抖动
C#模拟MSN窗体抖动 窗体抖动是件很有意思的事情,就让我们看看一起来看看它的原理吧. 其实是生成随机数,然后改变Form的左上角的坐标.我用的是循环来弄得,其实可以用timer来控制. 我把抖动分成 ...
- 设置tomcat配置文件,在Myeclipse中修改jsp文件之后不用重启tomcat
在Myeclipse中创建的Web程序在修改类或者jsp页面后需要重动ttomcat的,要重新加载一次的,即重新启动tomcat一次.重启时比较慢,及浪费资源及时间, 设置tomcat配置文件,在My ...
- UVA11402 - Ahoy, Pirates!(线段树)
UVA11402 - Ahoy, Pirates!(线段树) option=com_onlinejudge&Itemid=8&category=24&page=show_pro ...
- IIS7 大文件上传 asp.net iis配置
IS6下上传大文件没有问题,但是迁移到IIS7下面,上传大文件时,出现HTTP 404错误. IIS配置上传大小,webconfig <!-- 配置允许上传大小 --><httpRu ...
- function(window, undefined)的意义
var num = 10000 for (var i = 0; i++; i < num) { eval("pp" + i + "=" + i); } ( ...
- tarjan+缩点+强连通定理
C - Network of Schools Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I ...