vue移动端点击一个元素缩小，松手的时候元素恢复正常

active伪类解决

HTML代码

<div class=‘box‘>
</div>

CSS代码

.box {
  width: 100px;
  height: 100px;
  background: green;
  transition: transform 0.3s ease-out;
}

.box:active {
  transform: scale(0.5)
}

原文地址：https://www.cnblogs.com/helloyoyo/p/12375438.html

时间： 2024-11-05 20:42:55

vue移动端点击一个元素缩小，松手的时候元素恢复正常的相关文章

用Vue实现点击一个按钮，实现切换样式的效果

代码演示如下:(写的不好的地方,请见谅) <!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

点击一个ul的五个li元素，分别弹出他们的序号，怎么做？

方法1 : for(var i=0; i<oLis.length; i++){ oLis[i].onclick = (function(j){ return function(){ alert(j); } })(i); } 这样的话, 给每个li绑定onclick事件时, 其实绑的是一个立即执行函数, 这个立即执行函数的参数是i, 因为它是立即执行的, 循环时已经把i的值赋给了li的onclick事件, 所以在外部函数里的i改变后并不会影响i的值. 另一种实现方法:(立即执行函数) for(va

vue实现点击一个按钮出现弹框，点击弹框外关闭弹框

效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <button @click="showModal=false&quo

移动端点击300ms延迟

转载自:http://www.jianshu.com/p/6e2b68a93c88 一.移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果.在移动WEB兴起的初期,用户对300ms的延迟感觉不明显.但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受. 那么,移动端300ms的点击延

CSS3 修改和去除移动端点击事件出现的背景框

移动端开发的一个很大的好处就是可以不管讨厌的IE浏览器的兼容性,只需要页面在火狐等一些高级浏览器中正常显示就行.最近在写一些移动端的页面,刚好在今天遇到了这么一个神奇的css特性.那就是tap-highlight-color 这个特效是实现在移动端点击某个地方的时候,比如说按钮或者超链接的时候,系统会默认加上一些灰色的背景和一些高亮的效果.但是有的时候我们并不想要这些效果.并且希望点击的时候实现神不知鬼不觉的感觉,,这个时候就要用到tap-highlight-color了.只需要在点击的元素中加

&lt;转&gt;【读fastclick源码有感】彻底解决tap“点透”，提升移动端点击响应速度

[读fastclick源码有感]彻底解决tap“点透”,提升移动端点击响应速度 前言 读fastclick源码 绑定事件 stopImmediatePropagation 测试入口 帮助理解的图 为什么zepto会点透/fastclick如何解决点透 后记 结语 申明!!!最后发现判断有误,各位读读就好,正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样的话我们就抛弃了ie用户当然可以做兼容,

移动端点击、触碰

这篇文章将会阐述以下问题 延迟的click 拥抱tap 一次触碰 阻止它们!!!preventDefault还是stopPropagtion 模拟事件是什么鬼 事故现场 延迟 点穿(包含angular的ng-click) 焦点获取 分析Yocto,zepto,fastclick带来的思考 zepto -- 万恶的tap fastclick -- “完美” Yocto -- “后zepto时代替代者” 让我们开始吧! 迟到的click “移动端最好用tap,click是有延迟的...” 开始写移动

用Vue.js来开发一个电影App的前端部分

我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2建立一个类似风格的电影流媒体WEB交互界面(见上图). 最终的产品可以去这里找:https://codepen.io/itslit/full/mvvjzr. 尽管Bulma将作为应用的CSS框架,但是本文将主要集中在Vue.js的使用和浏览CSS式样,如果你想跟着学,我设置了一个可以作为开始学习的地方,所有自定义组合,初始数据对象和必要的需

网站点击导航栏标题，对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容. 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下面去了,没有给浏览者一种平滑的感觉.所以自己就计划着能不能做一种类似的比较平滑的效果呢? 当然是可以的.这篇博客中的特效要用到如下的函数和属性,大家没见过或者见过用过已经忘了的,可以到w3cshool上恶补下: eq(index):相当于数组吧,可以根据index索引到具体的对象 scrollTo(