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 ...
随机推荐
- 13个VSCode使用技巧，开启高效的开发模式
摘要:VsCode是一款开源的编辑器,拥有强大的功能,.由于拥有各种各样的插件,这就使得VsCode可以做到的事情更多了.在使用的过程中,也是有很多技巧的,掌握一些技巧对于后期写代码也会轻松很多. 本 ...
- Python 太难懂？火山引擎数智平台这款产品可以了解一下！
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 「自学 Python?一般人我还是劝你算了吧!」 在国内知识分享平台「知乎」上,这一吐槽话题获得了超过 260 ...
- Solon2 开发之IoC，六、提取 Bean 的函数进行定制开发
为什么需要提取Bean的函数?绝不是闲得淡疼.比如:控制器的@Mapping:再比如:Xxl-Job的@XxlJob.这些都是要提取Bean的函数并定制加工的. 1.比如提取 @XxlJob 注解的函 ...
- Java 网络编程 —— 异步通道和异步运算结果
从 JDK7 开始,引入了表示异步通道的 AsynchronousSockerChannel 类和 AsynchronousServerSocketChannel 类,这两个类的作用与 SocketC ...
- Hugging Face: 代码生成模型的预训练和微调
和大家分享我们的机器学习工程师 Loubna Ben Allal 在 10 月上海 KubeCon 大会的主题演讲 题目是: 代码生成模型的预训练和微调 演讲介绍了构建和训练大型代码模型比如: Sta ...
- Mysql--binlog日志
一.简介 binlog日志也称二进制日志,记录了所有的DDL和DML( 除了数据查询语句 )语句,以事件形式记录,还包含语句所执行的消耗的时间,MySQL的二进制日志是事务安全型的. 一般来说开启二进 ...
- async await 异步下载 异步代码加锁 lock 异步缓存
async await 异步下载 异步代码加锁 lock 异步缓存 FTP异步下载代码: /// <summary> /// 异步下载文件 /// </summary> /// ...
- UVA 156 Ananagrams STL应用
https://onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&prob ...
- Serverless 架构开发手册 — “人人都是 Serverless 架构师”先导篇
摘要:本篇实战将介绍如何以超低成本构建动态的 Web 站点,并且实现灵活扩展,限流等效果,最后再跟大家聊一聊"现代应用"的相关概念. 相信很多同学都有过想要拥有自己的 Web 站点 ...
- myeclipse过期问题
安装myeclipse后就会遇到过期问题.如下代码永久解决过期问题. import java.io.BufferedReader; import java.io.IOException; import ...