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. colormap中的内嵌彩色模块和调用方式

    内嵌彩色模块代码: import numpy as npimport matplotlib.pyplot as plt # Have colormaps separated into categori ...

  2. java无锁化编程一：目录

    假设我们用netty做服务,当接受到网络传输的码流,我们通过某种手段将这种传输数据解析成了熟悉的pojo,那这些pojo该如何进一步处理? 比如游戏中的抢购.场景业务等,对处理那种高并发的业务场景,如 ...

  3. es6（一）

    一.let和const: let :块作用域,不能重复声明. const:块作用域,声明的时候必须赋值,声明的值类型不能修改,引用类型由于是指针,所以可以修改. 二.解构赋值: 左边一种结构,右边一种 ...

  4. UML介绍

    UML是什么 Unified Modeling Language (UML)又称统一建模语言或标准建模语言,是始于1997年一个OMG标准,它是一个支持模型化和软件系统开发的图形化语言,为软件开发的所 ...

  5. 生命周期--JSF

    生命周期处理两种请求:初始请求和回发.当用户首次请求页面时,他或她正在首次请求该页面.当用户执行回发时,由于执行初始请求,他或她会提交以前加载到浏览器中的页面中包含的表单.当生命周期处理初始请求时,它 ...

  6. spring boot hello world

    本文讲解初始用户搭建spring boot 工程. 新建工程目录结构: application.java放在最外层的包目录里 先添加pom.xml的依赖包: <project xmlns=&qu ...

  7. nopcommerce 4.1 core 学习 增加商城配置属性

    需求:  原本是想用nop 来做国际版的商城,可以像亚马逊那样 国内外通用,  专门增加一个跨进元素属性. 学习里面的一些架构思想.  国内的行情还是 像himall  会比较实用. 这是在商城的综合 ...

  8. node.js学习三--------------------- http服务器模块的搭建

    /** * http服务器的搭建,相当于php中的Apache或者java中的tomcat服务器 */ // 导包 const http=require("http"); //创建 ...

  9. JS 返回上一页并刷新代码整理

    一:JS 重载页面,本地刷新,返回上一页: <a href="javascript:history.go(-1)">返回上一页</a> <a href ...

  10. ORM-Model操作

    django为使用一种新的方式,即:关系对象映射(Object Relational Mapping,简称ORM). django中遵循 Code Frist 的原则,即:根据代码中定义的类来自动生成 ...