木灵鱼儿
阅读:1472
transition-proerty 过渡样式
样式名称 | 样式类型 |
---|---|
background-color | color(颜色) |
background-image | only gradients(渐变) |
background-position | percentage, length(百分比,长度值) |
border-bottom-color | color |
border-bottom-width | length |
border-color | color |
border-left-color | color |
border-left-width | length |
border-right-color | color |
border-right-width | length |
border-spacing | length |
border-top-color | color |
border-top-width | length |
border-width | length |
bottom | length, percentage |
color | color |
crop | rectangle |
font-size | length, percentage |
font-weight | number |
grid-* | various |
height | length, percentage |
left | length, percentage |
letter-spacing | length |
line-height | number, length, percentage |
margin-bottom | length |
margin-left | length |
margin-right | length |
margin-top | length |
max-height | length, percentage |
max-width | length, percentage |
min-height | length, percentage |
min-width | length, percentage |
opacity | number |
outline-color | color |
outline-offset | integer |
outline-width | length |
padding-bottom | length |
padding-left | length |
padding-right | length |
padding-top | length |
right | length, percentage |
text-indent | length, percentage |
text-shadow | shadow |
top | length, percentage |
vertical-align | keywords, length, percentage |
visibility | visibility |
width | length, percentage |
word-spacing | length, percentage |
z-index | integer |
zoom | number |
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vue3 transition、watch、挂载api的变化
transition动画的变化就是vue3调整了一下动画类名,原来vue2是:.v-enter{ opacity: 0; } .v-leave{ opacity: 1; }这两个在vue3中改为:.v-enter-from{ opacity: 0; } .v-leave-to{ opacity: 1; }其相关属性也对应发生了变化:leave-class被重命名为 leave-from-class(可以写成 leaveFromClass在渲染函数或 JSX 中)enter-class被重命名为 enter-from-class(可以写成 enterFromClass在...
浅析Element的collapse-transition折叠动画
前言作为一个前端菜鸡,理解上可能会有诸多不对的地方,望大家指正,本篇文章也是本人这几天苦思冥想的结果,也不能保证所说全对,也算是抛砖引玉了,期待大佬们的指正。简单了解Render饿了么的折叠动画源码位于:src/transitions目录下,gayhub地址:链接由于内容不多,我直接贴出来源码:import { addClass, removeClass } from 'element-ui/src/utils/dom'; class Transition { beforeEnter(el) { addClass(el, 'collapse-transition'); ...

vue 切换路由动效
一直想找一个动效,因为以前一直都是使用mode="out-in";这种一般也就fade这种动效好看,如果要更好看一点,就需要花点心思了。效果原理通过给每个路由的自定义属性meta设置一个层级,第一层,第二层,第三层,也可以理解为第一页,第二页,第三页。然后通过这个层级关系判断页面是往左还是往右。源码[hide]vue<template> <div id="app"> <transition :name="transitionName"> <keep-alive&g...
