开发者社区> 开发者小助手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【Vue.js 入门与实战】--动画-小球动画flag标识符的作用分析

简介: 一、实现小球动画复习 二、成功范例 三、失败案例分析
+关注继续查看

动画-小球动画flag标识符的作用分析

目录:

一、实现小球动画复习

二、成功范例

三、失败案例分析

 

一、实现小球动画复习

首先设置一个小球,并为其设置设计

<style>

.ball {

  Width:15px

  Height:15px

  Background-color:red

  Border-radius:50

浏览下,可以看到小球已经被创建:

 

image.png

 

接下来我们再给他做一个按钮
<input  type =”button” value =”加入购物车” @click=”flag=!flag”>

 

<div class =”ball” v-show=”flag”></div>

</div>

 

<acript>

//创建VUE实例,得到Viewmodel

 Var vm = new Vue {{
el: ‘#app,

      Data:{

       Flag:false

     },

    Methods:{}

   }};

刷新点击后,即可看到执行效果:

image.png

 

二、成功范例

上面实现了最基本的功能,接下来通过VUE的动画机制,钩子函数实现小球加入购物车的效果,如果想要实现动画的话,第一步需要把小球放到元素当中去

<html lang-"en">
<head>
  <cmeta charset="UTF-8">

<cmeta name="viewport"content="width=device-width,initial-scale=1.0">

<cmeta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</titlo>
  <script src="./lib/vue-2.4.0.js"x/script>
  <style>
  .ball {
   width:15px;
   height: 15px;
   background-color:red;

borde-radius:50%;

     }

</style>

</head>


<body>
  <div id="app">
  <input type="button" value="加入购物车" @click="flag=!flag">

  <div class="ball" v-shiw="fiag"></div>
  </div>

<script>
//创建Vue实例,得到ViewModel

var Vm = new Vue({
el: '#app',
data: {
  flag: false

},

methods:{}

});

</scrtipt>

 </body>

<div id="app">
<input type="button" value="加入购物车"@click="flag=flag">
<transition>

这时小球只有从开始位置到结束位置的过渡关系,并没有回去的过程,这个时候就需要使用钩子函数,创造半场动画,这个时候就应该使用如下代码:
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnte">
  <div class="ball" v-show="flag">/div>

</transition>
</div>

<script>

 //创建Vue实例,得到 ViewModel

Var vm = new Vue({
el: '#app',
data: {
  flag: false

   },

       methods:{

  beforeEnter(el){
el.style.transtorm = 'translate(0,0)'

  },

此时通过上面的代码,我们定义了小球,启示时的开场位置,以及小球最终去的离场位置。下面的代码,我们设置小球的路径数据,以及过渡属性的数据。

enter(el,done){

  el.offsetWidth
  el.style.transform = 'translate(150px,450px)'

  el.style.transition = 'all’1s ease'

  done()

},
afterEnter(el){

  // this.fiag = !This.flag

  // el.style.opacity = 0.5

以上函数,可以使小球走到最终位置时,为隐藏状态。此时刷新点击,可看到小球成功执行。

 

 

 

三、失败范例分析

如果使用如下代码:

el.style.opacity = 0

此时点击也可以隐藏,也可以实现效果。但是第二次点击的时候就没有动画了,失败原因在于:

当前 opacity 设置为0与设置为0.5没有太大区别。都为二次点击时经过1s所有的时长就直接消失。

Vue把一个完整的动画,使用钩子函数,拆分为了两部分,我们使用 flag 标识符,来表示动画的切换。

刚开始,flag = false true false,这是,false true 为上半场函数,true false 为后半场函数。此时为了不让其自动执行后半场函数,需要对执行结果取非。

 This.flag = ! this.flag

上面这句话,有两个功能:

第一个功能是,

控制小球的显示与隐藏

第二个功能是,

直接跳过后半场动画,让flag 动画直接变为 false

当第二次点击按钮的时候,flag = false true。这就代表每次只执行前半场动画。

 



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Vue.js 入门与实战】--生命周期函数-组运行和销毁阶段的钩子函数
一、组件运行阶段 二、组件运行阶段代码演示 三、组件销毁阶段 四、总结
25 0
【Vue.js 入门与实战】--动画-钩子函数实现小球半场动画
一、首先需要画出小球 二、添加按钮(模拟加入购物车) 三、添加动画
22 0
使用 SAP Analysis Path Framework (APF) 来展示 SAP CDS view,支持各种类型的图表显示
使用 SAP Analysis Path Framework (APF) 来展示 SAP CDS view,支持各种类型的图表显示
46 0
4G LTE同构宏蜂窝和异构微蜂窝概述 | 带你读《5G UDN(超密集网络)技术详解》之三
4G 时代最有代表性的蜂窝移动系统就是 LTE,对应的无线接入技术就是 E-UTRA,它由 3GPP 项目组织领导进行了多版本的标准化。
2193 0
1954
文章
394
问答
来源圈子
更多
技术图谱:由专家组参与技术图谱的绘制与编写,知识与实践的结合让开发者们掌握学习路线与逻辑,快速提升技能 电子书:电子书由阿里内外专家打造,供开发者们下载学习,更与课程相结合,使用户更易理解掌握课程内容 训练营:学习训练营 深入浅出,专家授课,带领开发者们快速上云 精品课程:汇集知识碎片,解决技术难题,体系化学习场景,深入浅出,易于理解 技能自测:提供免费测试,摸底自查 体验实验室:学完即练,云资源免费使用
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载