transition过渡&动画

简介: 《Vue实战》笔记

API

使用

需要设置动画的元素或组件要在外边包裹一个<transition>标签,设置自定义的name,vue会根据元素的切换(进入/离开)过程添加相应的css类名,你可以自由地使用css类名来设置css过渡&动画

过渡的类名

在进入/离开的过渡中,会有 6 个 class 切换。

各类名的生命周期

  • 进入
  • v-enter 只存在于第一帧
  • v-enter-active 第一帧到最后一帧,结束后移除
  • v-enter-to 第二帧到最后一帧,结束后移除
  • 离开
  • v-leave 只存在于第一帧
  • v-leave-active 第一帧到最后一帧,结束后移除
  • v-leave-to 第二帧到最后一帧,结束后移除

如果你使用一个没有name<transition> ,则 v- 是这些类名的默认前缀。如果你使用了name="fade",那么 v- 前缀会替换为 fade-

css过渡 demo

See the Pen  vue的过渡动画 by xugaoyi (@xugaoyi)   on CodePen.

css动画 demo

See the Pen  vue的动画 by xugaoyi (@xugaoyi)   on CodePen.

组件中使用的示例

<template>
    <transition name="slide">
         <div class="add-song">
             ...
        </div>
    </transition>    
<template>
.add-song
    &.slide-enter-active, &.slide-leave-active
      transition: all 0.3s
    &.slide-enter, &.slide-leave-to
      transform: translate3d(100%, 0, 0)
相关文章
|
2月前
|
前端开发
Filp动画
Filp动画基于First、Last、Inverse、Play四步实现复杂前端动画效果。首先记录元素初始位置,接着记录目标位置,然后使用transform属性将元素逆向平移回初始位置,最后通过移除transform并添加transition属性实现平滑动画效果。这是一种高效解决CSS不支持过渡动画问题的方法。
45 1
|
8月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
105 2
|
8月前
|
移动开发 JavaScript 小程序
uView Transition 动画
uView Transition 动画
79 0
|
8月前
|
JavaScript 前端开发
css3过渡与动画
css3过渡与动画
70 0
|
存储 文件存储 云计算
不瞒了,我们和追光动画有一个《杨戬》!
不瞒了,我们和追光动画有一个《杨戬》!
207 0
|
JavaScript 前端开发
【jQuery动画】停止动画、淡入淡出、自定义动画
动画队列中所有动画都是按照顺序执行的,默认只有当前的一个动画执行完毕,才会执行后面的动画。为此,jQuery提供了stop()方法用于停止动画效果。通过此方法,可以让动画队列后面的动画提前执行。
An动画优化之遮罩层动画
An动画优化之遮罩层动画
288 0
|
前端开发
动画
动画
159 0
|
前端开发 JavaScript API