vue 半场动画进入状态
<style>
.box{
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="加入购物车" @click="flag=!flag">
<!-- 使用元素把小球包裹起来 -->
<!-- @before-enter 动画入场之前，此时还没有入场哈
@enter 表示动画的执行时候的状态
@after-enter 表示动画结束之后的状态
-->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="box" v-show="flag"></div>
</transition>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
flag: false
},
methods: {
//动画钩子函数的第一个参数el 表示要执行的动画的那个DOM元素 是一个原生的BOM对象
// 大家可以认为 el 是通过 document.getElementById来获取的哦
beforeEnter(el){ //beforeEnte表示动画入场之前 此时动画还没有完全的开始
// 此时设置开始动画之前的起始样子
el.style.transform="translate(0,0)"
},
enter(el,done){// enter表示动画开始之后的样子
el.offsetWidth //这一句话没有实际性的作用 但是如果不写 效果就出不来
// 你可以认为 el.offsetWidth 是让你看见动画的效果
el.style.transform="translate(150px,450px)"
el.style.transition="all 1s ease"
//这里的done 起始就是afterEnter这个函数， 也就是说done是afterEnter函数的引用 它就会自动调用下面这个函数
done()
},
afterEnter(el){
// 动画完成之后 就会调用这个函数
this.flag=!this.flag //最终让这个小球消失 取反 让小球消失
}
},
})
</script>
vue 半场动画进入状态的更多相关文章
- vue移动端转场动画
vue移动端转场动画 1.介绍:使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果 // 在App.vue根组件中 <template> <div ...
- vue-router自动判断左右翻页转场动画
前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作 ...
- CATransition自定义转场动画
我们可以通过CATransiton来自定义一些漂亮的转场动画, CATransition继承自CAAnimation, 所以用法跟CAAnimation差不多 先直接上一个代码: #import &q ...
- CATransition转场动画
背景: 最近在温习动画,分享个简单系统的转场动画 viewcontroller *VC=[self.storyboard instantiateViewControllerWithIdentifier ...
- iOS开发UI篇—核心动画(转场动画和组动画)
转自:http://www.cnblogs.com/wendingding/p/3801454.html iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的 ...
- 图片浏览（CATransition）转场动画
Main.storyboard ViewController.m // // ViewController.m // 8A04.图片浏览(转场动画) // // Created by huan ...
- Android Activity和Fragment的转场动画
Android Activity和Fragment的转场动画 Activity转场动画 Activity的转场动画是通过overridePendingTransition(int enterAnim, ...
- Swift开发小技巧--自定义转场动画
自定义转场动画 个人理解为重写了被弹出控制器的modal样式,根据自己的样式来显示modal出来的控制器 例:presentViewController(aVC, animated: true, co ...
- 捉襟见肘之TableView的手势（删除、编辑等）与转场动画手势冲突
在使用PresentModel的方式进行转场动画时,出现UIPercentDrivenInteractiveTransition和 UITableView的自带手势冲突,问题需要总结,今天系统复习和总 ...
- CATransition-转场动画
CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATrans ...
随机推荐
- 如何打造企业专属 A/B 平台？火山引擎 DataTester 开放平台技术揭秘
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 企业为什么需要开放平台 开放平台对于企业与业务来说,做到的不仅是能力的开放.生态的开放,与此同时还要能提供完善的业 ...
- 《consul 简易上手指南》
consul 是一个用来做服务发现的框架,具有分布式.高可用以及可横向扩展的特性 什么是服务发现?为什么要实现服务发现? 举个常见的例子: 假设有一台 client 想要实现不同的业务,就需要调用接口 ...
- OS | 读者写者问题（读者优先,写者优先 ,读写公平）
读者优先 读者优先的解决方案: 互斥信号量 wrt,初值是 \(1\),代表一个共享文件,解决 "读-写"互斥,"写-写"互斥. 一个记数器,即整型变量 rea ...
- VS以及C++开发和学习使用注意事项
VS以及C++开发使用注意事项 在vs2013版本开始出现安全检查 最好提前禁用错误4996 制表符问题:Visual Studio中设置Tab键对应空格数的方如下:依次选择:工具-〉选项 -〉文本编 ...
- Problem 330A - Cakeminator （思维）
330A. Cakeminator https://codeforces.com/problemset/problem/330/A 题意很容易理解:给定一块蛋糕区域,但蛋糕上有几个不能吃的草莓,大胃王 ...
- vue学习笔记 十七、父子组件 ---> 子组件传值
系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...
- P1541-DP【绿】
刚开始理解错题意了,题中说"玩家每次需要从所有的爬行卡片中选择一张之前没有使用过的爬行卡片"指的是不能用同一张卡片,我给理解成不能连续用同一种卡片了.后来想想其实题目中的说法歧义不 ...
- hdu 5234
题意:求在不超过k的情况下,最多可以得到多少价值. 三维dp,结合01背包,第三维就是用来保存在不同的背包容量下能得到的最大价值,也就是第三维有很多状态. #include<iostream&g ...
- 《DREEAM Guiding Attention with Evidence for Improving Document-Level Relation Extraction》阅读笔记
代码 原文地址 预备知识: 1.什么是K-L散度(Kullback-Leibler Divergence)? K-L散度,是一种量化两种概率分布P和Q之间差异的方式,又叫相对熵.在概率学和统计 ...
- 【Git】用法小记
解决windows环境下的CRLF与unix环境下的LF问题,windows提交时CRLF=>LF,签出时LF=>CRLF,unix环境保留 git config --global cor ...