transition过渡&动画

小小杰啊

发布于 2022-12-21 20:28:30

1.6K0

文章被收录于专栏：Dimples开发记Dimples开发记

# transition过渡&动画

API (opens new window)

# 使用

需要设置动画的元素或组件要在外边包裹一个<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

HTML

<div id="root">
  <button @click="handleClick">切换</button>
  <transition name="fade">
    <div v-show="show">hello world</div>
  </transition>
</div>

CSS

.fade-enter{
  /*第一帧，opacity是0，第二帧开始被移除，即变成1,*/
  opacity: 0
}
.fade-enter-active{
  /*当监控到opacity变化的时候（即从0到1），给2s的过渡*/
  transition: opacity 1s;
}

.fade-leave-to{
  /*首先，opacity是1，离开的第二帧变成0,*/
  opacity: 0
}
.fade-leave-active{
  /*当监控到opacity变化的时候（即从1到0），给2s的过渡*/
  transition: opacity 1s;
}


/*简化代码*/
/*
.fade-enter,
.fade-leave-to{
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active{
  transition: opacity 2s;
}
*/

var vm = new Vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleClick() {
      this.show = !this.show
    }
  }
})

# css动画 demo

HTML

<div id="root">
    <button @click="show = !show">切换</button>
      <transition name="bounce">
        <p v-if="show">文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
      </transition>
  </div>

CSS

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

var vm = new Vue({
  el: '#root',
  data: {
    show: true
  }
})

# 组件中使用的示例

<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)

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-02-04，如有侵权请联系 cloudcommunity@tencent.com 删除

css

html

transition过渡&动画

transition过渡&动画

# transition过渡&动画

# 使用

# 过渡的类名

# css过渡 demo

# css动画 demo

# 组件中使用的示例

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐