<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. hdu 3068 最长回文 【Manacher求最长回文子串，模板题】

    欢迎关注__Xiong的博客: http://blog.csdn.net/acmore_xiong?viewmode=list 最长回文                                 ...

  2. TCP/IP具体解释--TCP的分段和IP的分片

    写在前面: 分组能够发生在运输层和网络层.运输层中的TCP会分段,网络层中的IP会分片.IP层的分片很多其它的是为运输层的UDP服务的,因为TCP自己会避免IP的分片,所以使用TCP传输在IP层都不会 ...

  3. BZOJ 3196 线段树套平衡树

    (代码无比丑陋) //By SiriusRen #include <cstdio> #include <algorithm> using namespace std; int ...

  4. 洛谷P2598 [ZJOI2009]狼和羊的故事

    题目描述 “狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向．．．．．．” Orez听到这首歌,心想:狼和羊如此和谐,为什么不尝试羊狼合养呢?说干就干! Orez的羊狼圈 ...

  5. Yeslab 华为安全HCIE-第五门-防火墙攻击防范技术

    Yeslab 华为安全HCIE-第五门-防火墙攻击防范技术 课程目录 Yeslab华为安全HCIE-第五门-防火墙攻击防范技术(8篇)\1_单包攻击防范.aviYeslab华为安全HCIE-第五门-防 ...

  6. 二：2.1 字符串与循环中的 while

    字符串:字符串是以单引号或双引号括起来的任意文本 创建字符串: str1 = "sunck is a good man!" str3 = "sunckis a nice ...

  7. 使用virtualenv搭建python虚拟开发环境

    在使用python做开发时,如果多人需要在同一台机器上工作,或者机器环境经常变化时, 添加或删除一些python包很可能会影响到你自己的开发环境. 因此,通过virtualenv工具可以创建一个完全属 ...

  8. 具体解释NoSQL数据库使用实例

    一.NoSQL基础知识 1．关于NoSQL 在"NoSQL"一词.实际上是一个叫Racker的同事创造的,当约翰埃文斯埃里克要组织一次活动来讨论开源的分布式数据库. 这个名称和概念 ...

  9. C语言之基本算法39—字符串经典操作

    //字符串概念! /* ================================================================== 题目:练习字符串的 1.输入输出      ...

  10. log4j+slf4j迁移到log4j2+slf4j （Servlet3.0）

    近期对系统中的旧项目实现log升级,选择了log4j2来取代log4j.作为最新一代的log实现.log4j2好在那里能够直接看log4j2性能章节. 这里写写怎样从log4j升级到log4j2. 1 ...