vue.js - vue2.0中过渡效果以及transition属性理解

问题描述

问 题

在一些地方看到vue2.0中这样的写法：
模板文件中，

 <transition name="slide">    
 </transition>

css样式文件：

 .slide-enter-active, .slide-leave-active
    transition: all 0.3s ease
 .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)

我有两个不明白的问题：

1. .slide-levave-to这个属性我在官网上没有看到啊，它表示什么意思

2. transform: translate3d(100%, 0, 0)，这代表什么含义？

解决方案

官网是有关于leave-to的解释的 过渡的-CSS-类名
官网api

---

另外第二个问题就是看你css3基本功了
translate3d 这个去mdn搜索一下就有的
translate3d() CSS 函数在3D空间内移动一个元素的位置. 这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。
translate3d-mdn

这篇关于vue.js - vue2.0中过渡效果以及transition属性理解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！