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. 【性能测试】LoadRunner11安装（包含破解、汉化）

    LoadRunner安装(包含破解.汉化) 安装LoadRunner a.以解压包的方式打开[性能测试工具LR11.00].loadrunner-11.iso文件,运行“setup.ext”(花费时间 ...

  2. 如何改变checkbox的样式

    <!doctype html> <html>       <head>         <meta charset="utf-8"> ...

  3. mysql数据库的基本操作命令总结

    本文章将讲述Mysql数据的的基本操作.前期的安装请自行百度 运行环境:linux Ubuntu 16.04 命令行连接 在工作中主要使用命令操作方式,要求熟练编写 打开终端,运行命令 mysql - ...

  4. django中的Q查询

    转载于:https://mozillazg.com/2015/11/django-the-power-of-q-objects-and-how-to-use-q-object.html 原文写的很详细 ...

  5. 活代码LINQ——01

    序言 此系列的所有代码都是运行在Win 7 64位 + Visual Basic 2008 Express Edition的环境中 之所以学习List集合类,是因为我们先前学习的数组自身的缺陷: 1. ...

  6. [SCOI2005]扫雷

    我们可以发现...最开始的两个...只有两种情况...直接枚举一下...递推出结果好了... 呆码: #include<iostream> #include<cstring> ...

  7. oracle入门之基本数据类型

    1.char(size)存放字符串,它最大可以存放2000个字符,是定长. 举例说明: create table test1(name char(32));//test1表中的name字段最多存放32 ...

  8. 利用svn的补丁文件打包生成增量文件

    下面的代码是maven版本 1. 创建patch.txt增量文件 保存到 文件目录下 比如 E:\aa\patch.txt 2. 编写java代码 package utils; import java ...

  9. 怎么单独为ionic2应用的某一组件设置两个平台一致的样式

    今天在继续项目的过程中,发现ionic2在显示样式上是根据不同的平台采用不同的样式,使在不同平台上的应用保持相应的风格,于是问题来了. ios的风格比较好看,android的风格略微不如ios的,所以 ...

  10. unsigned long long类型与long long类型

    最近做题的时候,经常遇到范围是2^63,取模2^64的这种题目.遇到这种限制条件时就要想到用unsigned long long类型. 可以简洁地声明为typedef unsigned long lo ...