transition动画设置

简介: 系列

transition过渡&动画

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)
相关文章
|
容器 JavaScript Web App开发
如何不用 transition 和 animation 也能做网页动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/BxbQJj 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1143 0
|
前端开发 JavaScript API
transition过渡&动画
《Vue实战》笔记
105 0
|
前端开发
transition和animation的区别
transition和animation的区别
|
前端开发
transition过渡效果
语法:transition: property duration timing-function delay; transition-property 规定设置过渡效果的 CSS 属性的名称。transition-duration 规定完成过渡效果需要多少秒或毫秒。
765 0
|
4月前
keyframes、animation-name属性、animation-duration属性
【10月更文挑战第6天】keyframes、animation-name属性、animation-duration属性。
37 4
|
JavaScript 开发者
动画-使用 transition-group 元素实现列表动画|学习笔记
快速学习动画-使用 transition-group 元素实现列表动画
159 0
动画-使用 transition-group 元素实现列表动画|学习笔记
|
JavaScript 开发者
动画-使用transition-group元素实现列表动画|学习笔记
快速学习动画-使用transition-group元素实现列表动画
140 0
动画-使用transition-group元素实现列表动画|学习笔记
|
JavaScript
vue动画 <transition-group> 使用半场动画
vue动画 <transition-group> 使用半场动画

热门文章

最新文章