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代码中设置. 一种直接在 ...
随机推荐
- MVC4 过滤器(转)
先来看看一个例子演示过滤器有什么用: public class AdminController : Controller { // ... instance variables and constru ...
- getaddrinfo详解
#include <sys/socket.h> #include <netdb.h> int getaddrinfo(const char *restrict nodename ...
- Informatica 常用组件Source Qualifier之二 默认查询
2 默认查询 对于关系源,PowerCenter Server 将在运行会话时为每个源限定符转换生成查询.对于每个在映射中使用的源列,默认查询均为 SELECT 语句.也就是说,PowerCenter ...
- Power Desginer系列03【转载】
在PowerDesigner中设计物理模型1——表和主外键 在PD中建立物理模型由以下几种办法: 直接新建物理模型. 设计好概念模型,然后由概念模型生成物理模型. 设计好逻辑模型,然后由逻辑模型生成物 ...
- go语言基础之输入的使用
1.输入的使用 第一种写法:fmt.Scanf("%d", &a) 第二种写法:fmt.Scan(&a) 示例: package main //必须有一个main包 ...
- 通过完整示例来理解如何使用 epoll
网络服务器通常使用一个独立的进程或线程来实现每个连接.由于高性能应用程序需要同时处理大量的客户端,这种方法就不太好用了,因为资源占用和上下文切换时间等因素影响了同时处理大量客户端的能力.另一种方法是在 ...
- Fibre Channel和Fiber Channel
Fibre Channel也就是"网状通道"的意思,简称FC. 由于Fiber和Fibre只有一字之差,所以产生了很多流传的误解. FC只代表Fibre Channel,而不是 ...
- 使用javascript比较任意两个日期相差天数(代码)
avascript比较两个日期相差天数,可返回负值,表示后者大于前者. 该函数在IE,firefox下均通过测试. /** 比较两个日期相差的天数,可为负值 **/ function DateDiff ...
- Android -- Sqlite事务
这也是通过Android Juint来实现的. 基于上一次的工程继续,上一次工程传送门:<Android–Android Juint 与 Sqlite> http://www.cnblog ...
- SVG Viewer 3.0安装发现SVG Viewer License.txt无法介入写入,安装失败
这几天研究SVG,发现"SVG Viewer 3.0安装发现SVG Viewer License.txt无法介入写入,安装失败"这个问题,晚上没找到解答的答案,后来被我们项目经理搞 ...