VUE2.0单元素或组件的过渡

情景：插件从右向左滑动，巧用translate3d

.food
  position :fixed
  left : 0
  top :0
  bottom :48px
  z-index :30
  width :100%
  background-color :#fff
  transform :translated3d(0,0,0)
  &.move-enter-active,&.move-leave-active
    transition :all 0.4s linear
  &.move-enter,&.move-leave-to
    transform :translate3d(100%,0,0)

CSS-动画巧用translated3d的更多相关文章

  1. 《CSS动画实用技巧》课程笔记

    概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...

  2. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  3. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  4. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  5. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  6. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  7. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  8. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  9. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  10. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

随机推荐

  1. GIT 初始化 中文编码、自动换行

    解决中文编码: git config --global core.quotepath false git config --global gui.encoding utf-8 解决git log 中文 ...

  2. Intellij 代理抛出异常错误: java.rmi.server.ExportException: Port already in use: 1099，端口被占用

    代理抛出异常错误: java.rmi.server.ExportException: Port already in use: 1099 端口被占用 解决方案: 1.查找出占用进程id 2.杀死进程 ...

  3. Python-接口自动化（七）

    requests模块(七) (八)requests模块 1.requests是用python语言编写,属于第三方库,基于urllib,采用Apache2 Licensed开源协议的HTTP库,它比ur ...

  4. spring boot 连接多个数据源

    在springboot中有需要连接多个数据源的情况. 首先配置文件application.properties中添加两个数据源连接字符串 mybatis.type-aliases-package=co ...

  5. Python 的第一个小程序

    F盘   新建文本文档 hello.txt 内容为: print("hello world! hello 2018!"); 打开CMD cd c:\                 ...

  6. 记录Linux CentOS 7系统完整部署Docker容器环境教程

    笔者之前有在"详细介绍Ubuntu 16.04系统环境安装Docker CE容器的过程"文章中有介绍到利用Ubuntu系统安装Docker容器环境的过程.如果我们有使用CentOS ...

  7. Python之OS内置模块

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd os.curd ...

  8. shell练习题2

    需求如下: 写一个shell脚本,检查指定的shell脚本是否有语法错误,若有错误,首先显示错误信息,然后提示用户输入q或Q退出脚本, 输入其他内容则直接用vim打开该shell脚本. 参考解答如下 ...

  9. ionic 实现仿苹果手机通讯录搜索功能

    前言 由于之前做的SRM移动应用采用的是ionic1.x框架进行开发的,由于性能方便的诟病,导致用户体验不是很友好,于是想着怎么样去提高应用的性能问题.此时刚好ionic3.x框架已发布,由于ioni ...

  10. Vmware Vsan 部署中如何将非SSD 硬盘标识为SSD

    通过SSH 登录ESXi主机 # esxcli storage nmp device list #查询ESXI 发现的存储设备 #   esxcli storage nmp satp rule add ...