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. 箭头函数里this理解

    先来看代码: var obj1={ id:4, fn:function(){ var f=() => { console.log(this); //object,f()定义在obj1对象中,th ...

  2. 【vue学习】vue 2.0版本以上创建项目的的步骤

    一.环境准备 1.vue项目依赖 node.js npm,需要先安装node和npm,先检查本地是否安装node.npm 快捷键win+r   输入cmd  弹出操作框,如果电脑已经安装git,直接右 ...

  3. 阿里云Oss对象存储

    将文件保存到阿里云上. 1.添加对象存储OSS空间 (新建Bucket) 可以在阿里云后台对象存储里面添加,也可以通过api添加.添加之后设置权限. skd使用. 1安装 Aliyun.OSS.SDK ...

  4. UnityShader实现物体被遮挡描边

    之前在网上看到物体遮挡描边的功能,自己也拿来实现了一番.算作第一篇博客的开篇. 先贴出几张效果图,也是个人思路和方案的改进路线吧. ////////////////////////////////// ...

  5. python 使用selenium模块爬取同一个url下不同页的内容（浏览器模拟人工翻页）

    页面翻页,下一页可能是一个新的url 也有可能是用js进行页面跳转,url不变,解决方法是实现浏览器模拟人工翻页 目标:爬取同一个url下不同页的数据(上述第二种情况) url:http://www. ...

  6. bit、byte、与字符

    bit bit是计算机中最小的传输单元 是计算机晶体管的一种状态(通电与断电).就是0与1,真与假. 示例: 2bit : 10; 4bit : 1111; 8bit : 1111 1111; byt ...

  7. [工控安全]西门子S7-400 PLC固件逆向分析(一)

    不算前言的前言:拖了这么久,才发现这个专题没有想象中的简单,学习的路径大致是Step7->S7comm->MC7 code->firmware,我会用尽量简短的语言把前两部分讲清楚, ...

  8. Problem 1: Multiples of 3 and 5

    小白一枚,python解法,共同学习,一起进步. Problem 1: Multiples of 3 and 5 If we list all the natural numbers below 10 ...

  9. 详解angular2组件中的变化检测机制（对比angular1的脏检测）

    组件和变化检测器 如你所知,Angular 2 应用程序是一颗组件树,而每个组件都有自己的变化检测器,这意味着应用程序也是一颗变化检测器树.顺便说一句,你可能会想.是由谁来生成变化检测器?这是个好问题 ...

  10. 预热ASP.NET MVC 的View

    ASP.NET MVC 的View 预设是Load on Demand(按需加载),也就是说View 第一次要Render 的时候才会去载入跟编译,这个就会造成一个现象,即使Web 应用程式已经完成启 ...