vue-4 flag标识符的作用_"@click=\"flag=!flag,num=index"_weixin_43074997的博客-程序员秘密

技术标签: vue-4 flag标识符  经验  理解  

动画购物车小球flag标识符的作用

单程动画的小球在结束动画时要消失,既然这样就直接把display改成node,再点击按钮的时候,函数重新折行,小球就冲初始位置开始移动

@click = “ flag = !flag”

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .ball {
      width: 15px;
      height: 15px;
      background-color: red;
      border-radius: 50%;
    }
  </style>
</head>

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

    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <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.transform = 'translate(0, 0)'
        },
        enter(el, done){
          el.offsetWidth

          el.style.transform = 'translate(150px, 450px)'
          el.style.transition = 'all 1s ease'
          done()
        },
        afterEnter(el){
          // 这句话, 第一个功能,是控制小球的显示与隐藏
          // 第二个功能: 直接跳过后半场动画,让 flag 标识符 直接变为 false
          // 当第二次再点击 按钮的时候, flag  false  ->    true
          this.flag = !this.flag
          // el.style.opacity = 0.5

          // Vue 把一个完整的动画,使用钩子函数,拆分为了两部分:
          // 我们使用 flag 标识符,来表示动画的切换;
          // 刚以开始,flag = false  ->   true   ->   false
        }
      }
    });
  </script>
</body>

</html>
  • transform 变形 : translate() 位置 transition : 动画时长
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43074997/article/details/97516673

智能推荐

Extjs4.0学习笔记四(Tree应用)_zhou_zhou_gogo1的博客-程序员秘密

                        Extjs4.0 学习笔记四    继续学习Extjs4.0 菜单tree应用,这次实现的是Extjs与Struts2之间的数据交互。其中交互的数据格式为json,采用的技术有json-lib,本次数据是在Struts的服务里写死的,实际项目中,菜单列表都是从数据库表里读取的。Extjs:    用于前台页面展示Struts:...

[洛谷1207] [USACO1.3]双重回文数 Dual Palindromes_ssl_lw的博客-程序员秘密

题目https://www.luogu.org/problemnew/show/P1207解题思路跟[洛谷 1206] [USACO1.3]回文平方数 Palindromic Squares {结构体练习}差不多了。代码#include&amp;lt;cstdio&amp;gt;#include&amp;lt;cstring&amp;gt;#include&amp;lt;algorithm&amp;gt;using nam...

VMware虚拟机网络设置简述_wo0o0o0o0的博客-程序员秘密

VMware虚拟机网络设置1.bridged(桥接模式)2.host-only(主机模式)3.NAT(网络地址转换模式)

数组越界问题_判断索引是否越界了_呼hu呼的博客-程序员秘密

首先一点是明白数组是有固定的大小的,然后是数组的下标是从0开始到定义的数组size-1。数组越界常发生在非法索引访问数组,非法是指索引值为负值或大于等于数组大小,这里最常迷惑人的是大于等于数组大小。首先,因为在往数组中插入数据时,数组此时的大小是等于数组中数据长度的,并不是你之前的规定的值。那之前规定的值有什莫用呢?之前规定的值是用来限制数组长度的,规定数组中只能存放这么多数据。所...

模拟布朗运动与几何布朗运动_三生断绝的博客-程序员秘密

模拟标准布朗运动,布朗运动,集合布朗运动

普通话测试第四题评分标准_【2016年普通话测试的试卷构成及评分标准】- 环球网校..._weixin_39839541的博客-程序员秘密

【摘要】为了叫大家更方便快捷的了解普通话水平测试,环球网校教师资格频道整理了2016年普通话测试的试卷构成及评分标准,希望大家喜欢,环球网校教师资格频道时时更新行业最新动态,发布复习考试资料,欢迎【摘要】为了叫大家更方便快捷的了解普通话水平测试,环球网校教师资格频道整理了2016年普通话测试的试卷构成及评分标准,希望大家喜欢,环球网校教师资格频道时时更新行业最新动态,发布复习考试资料,欢迎大家关注...

随便推点

论文笔记《Selective Search for object recognition》_鸟恋旧林XD的博客-程序员秘密

周一对图像语义分割的情况大致了解些情况。从周二开始花了2天半的时间读了第一篇文章《Selective Search for object recognition 》。文章名:《物体识别中的选择性搜索方法》作者: J.R.R. Uijlings  University of Trento, Italy.意大利特伦托大学发表: IJCV 2012一、摘要本文主要介绍物体

微信小程序之仿微信漂流瓶_dzp_coder的博客-程序员秘密

周末找事做做.看到微信里有个漂流瓶.试着敲了敲.这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利.欢迎交流!技术点:1.微信小程序开发之录音机 音频播放 动画 (真机可用)2.微信小程序开发之用户系统 一键登录 获取session_key和openid3.微信小程序开发之常见问题 不在以下合法域名列表中

查找与排序_linlinlin45的博客-程序员秘密

查找的相关概念查找是什么呢?我准备打个电话给朋友,懒得重新输入电话号码,需要查找通讯录或者通话记录;我想买件衣服或者买双鞋,需要在网购app上搜索关键字,来查找心仪的商品;我LOL想练一个没玩过的英雄,不知道该点什么天赋,出什么装备,需要去浏览器去查找玩法攻略;…由此可见,查找或搜索,在我们的生活中随处可见,甚至说是必不可少的。所以我们来讲一下查找的相关概念:在数据结构中,我们把所有被查的数据所在的集合,统称为查找表查找表(Search Table)是 同一类型 的数据元素(或记录

遇见狂神说JAVA笔记 --- Mybatis 学习_小智RE0的博客-程序员秘密

传送门==&gt;B站遇见狂神说–Mybatis教程笔记和练习只是跟着视频整理的;有的知识点并没有整理进来.ML1.什么是 Mybatis1.1如何获取/下载Mybatis1.2 什么是持久化,持久层1.3 为什么需要Mybatis2. 先试试Mybatis程序2.1 首先是搭建环境2.1.1先创建一个数据库;建个数据表,一会儿要对数据库进行操作;顺便存入几行数据2.1.2 新建一个普通的maven项目;2.1.3 把创建的项目中的src目录删掉;那么这个项目就作为父级工程2.1.4 导入项目需要

php扩展安装--OpenSSL扩展_ouyang-web之路的博客-程序员秘密

先安装依赖包:yum install openssl openssl-devel进入PHP安装包里的OpenSSL文件夹,根据个人的安装包位置不同,此处是cd /home/local/php.5.6.25/ext/openssl/phpize可能会报错:Cannot find config.m4.Make sure that you run /usr/local/bin/phpize i...

GDB再学习(6):断点调试之软件断点_gdb 软件断点_Stoneshen1211的博客-程序员秘密

文章目录1 断点简介2 软件断点3 程序准备4 指令介绍4.1 通过函数名设置断点 break func [ if cond ]4.2 通过行号的方式来设置断点 break line_number [ if cond ]4.3 通过文件名和行号的方式来设置断点break file.c:line_number [ if cond ]4.4 一次有效指令 tbreak4.5 与正则表达式regex匹配的所有函数上设置断点 rbreak regex4.6 查看断点信息 info breakpoints4.7 使断

推荐文章

热门文章

相关标签