<body>

  <div id="app">

    <input type="button" value="Add to Cart" @click="flag=!flag">

    <transition

    @before-enter="beforeEnter"

    @enter="enter"

    @after-enter="afterEnter">

    <!-- 这里 @after-enter="afterEnter"  后面不要加括号。

      不加括号，表示直接调用这个方法。

      加括号 表示调用 方法的完成之后的取值。 -->

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

    </transition>

  </div>

  <script>

  var vm = new Vue({

    el:'#app',

    data:{

      flag: false, // 这里是布尔值，不是字符串，不要加引号。

    },

    methods: {

      beforeEnter(el){

        // el.style.transition = transform(0, 0);

        el.style.transform = 'translate(0, 0)'

      },

      enter(el, done){

        el.offsetWidth;

        // el.style.transition = transform(100, 450);

        // el.style.opacity = 0;

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

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

        done();

      },

      afterEnter(el){

        this.flag =! this.flag;

      },

    },

  });

  </script>

</body>

VUE错误记录 - 小球模拟购物车的更多相关文章

  1. vue 错误记录

    1.错误信息: You may use special comments to disable some warnings.Use // eslint-disable-next-line to ign ...

  2. Vue 错误记录：Cannot read property 'beforeRouteEnter' of undefined

    点击某路由链接,页面提示: Cannot read property 'beforeRouteEnter' of undefined 查看代码并无手写beforeRouterEnter设置, 把页面内 ...

  3. VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数

    methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date()}; this.list.push(car); ...

  4. vue错误记录

    启动时报错如下 D:\QQFile\\FileRecv\industry_vue>cnpm run dev > vue_demo@ dev D:\QQFile\\FileRecv\indu ...

  5. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. Vue 问题记录

    Vue 问题记录 汇总日常开发中遇到的关于vue的问题 VeeValidator 语言设置 校验消息默认是英文的,定义中文或其他语言的错误提示消息 import VeeValidate from 'v ...

  7. uploadify插件Http Error（302）错误记录（MVC）

    由于项目(asp.net MVC)需要做一个附件上传的功能,使用的是jQuery的Uploadify插件的2.1.0版本,上传文件到自己项目指定的文件夹下面.做完之后,在谷歌上测试是正确的,在火狐上报 ...

  8. 开发错误记录8：Unable to instantiate application com

    开发错误记录8:Unable to instantiate application com.android.tools.fd.runtime.BootstrapApplication 这是因为在And ...

  9. PHP 错误与异常 笔记与总结（5）配置文件中与错误日志相关的选项 && 将错误记录到指定的文件中

    [记录错误(生产环境)] php.ini: ① 开启 / 关闭 错误日志功能 log_errors = On ② 设置 log_errors 的最大字节数 log_errors_max_len = 其 ...

随机推荐

  1. RvmTranslator7.0-IFC

    RvmTranslator7.0-IFC eryar@163.com RvmTranslator can translate the RVM file exported by AVEVA Plant( ...

  2. nyoj--19--擅长排列的小明(dfs)

    擅长排列的小明 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想为难 ...

  3. 78.Nodejs基础中间件Connect

    转自:https://www.cnblogs.com/chris-oil/p/5625437.html 前言 “中间件”在软件领域是一个非常广的概念,除操作系统的软件都可以称为中间件,比如,消息中间件 ...

  4. 21. 【intellij idea】Project Structure 讲解

    转自:.https://www.cnblogs.com/zadomn0920/p/6196962.html 项目的左侧面板 项目设置->Project Project Settings -> ...

  5. vue --- cli build 后的项目，图片路径出错

    今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自 ...

  6. Zookeeper的单节点集群详细启动步骤

    这个很简单,见如下博客. 1 week110的zookeeper的安装 + zookeeper提供少量数据的存储 [hadoop@weekend110 zookeeper-3.4.6]$ pwd/ho ...

  7. Codeforces 344A Magnets

    Description Mad scientist Mike entertains himself by arranging rows of dominoes. He doesn't need dom ...

  8. 转:Java读写文件各种方法及性能比较

    干Java这么久,一直在做WEB相关的项目,一些基础类差不多都已经忘记.经常想得捡起,但总是因为一些原因,不能如愿. 其实不是没有时间,只是有些时候疲于总结,今得空,下定决心将丢掉的都给捡起来. 文件 ...

  9. 今日SGU 5.19

    SGU 142 题意:给你一个长度为n的串(由a,b组成),让你找出一个串不是n的子串,长度最下 收获:思维题,思路在代码里 #include<bits/stdc++.h> #define ...

  10. SpringMVC框架的多表查询和增删查改

    必须声明本文章==>http://www.cnblogs.com/zhu520/p/7883268.html 一: 1):我的运行环境 我使用myeclipse(你也可以使用eclipse),t ...