Vue过渡&动画

大家好，我是VHotDog，热狗得小癞皮狗！

目录

  • 概述
  • 过渡
    • 过渡类名
  • 动画
  • transition属性介绍
    • name
    • appear
    • css
    • type
    • mode
    • duration
  • 注意

最近看一个项目源码时，竟然发现这一篇我竟然没有看，竟然不知道，不知道！！！

然后我就去官网康了一下。他是这亚子说的

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过渡效果大家都晓得吧。
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

css3过渡简写属性：transition: 用于过渡的属性 时间 速度变化效果 延迟时间;

不过呢，嘿嘿。Vue帮我们封装好了！！

过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡.
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<style>
.dog-enter-active, .dog-leave-active {  // vue提供的过度类名。下面会讲
  transition: opacity .5s;
}
.dog-enter, .dog-leave-to {
  opacity: 0;
}
</style>

<body>
    <div id ="app">
       <button v-on:click="show = !show"> // 点击时，show值会true false变换
按钮
  </button>
<transition name="dog">  // 自己定义的名称哦
<p v-if="show">hello vue</p>
 </transition>
    </div>

</body>
    <script>
     //创建Vue实例,得到 ViewModel
     let vm = new Vue({
        el: '#app',
        data: {
show: true
        },
        methods: {}
     });
    </script>
</html>

可以实现点击”按钮“时，下面文字(hello vue)'淡入淡出’的效果。

过渡类名

在进入/离开的过渡中，会有 6 个 class 切换。(下面的v是默认的前缀)
opacity(透明度)

1.v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 dog-enter。

动画

动画和过渡的用法相同，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

css3动画简写属性：animation 绑定的keyframe名 花费时间 速度变化效果 延迟 播放次数 是否反向;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.dog-enter-active {
  animation: move .5s;
}
.dog-leave-active {
  animation: move .5s reverse;
}
@keyframes move {
  0% {
transform: scale(0);
  }
  50% {
transform: scale(1.5);
  }
  100% {
transform: scale(1);
}
</style>

<body>
    <div id ="app">
       <button @click="show = !show">按钮</button>
  <transition name="dog">
    <p v-if="show">字数长一点，效果更好哦！！</p>
  </transition>
    </div>

</body>
    <script>
     //创建Vue实例,得到 ViewModel
     let vm = new Vue({
        el: '#app',
        data: {
show: true
        },
        methods: {}
     });
    </script>
</html>

貌似有点生命周期那个味了呀。

transition属性介绍

name

用于自动生成 CSS 过渡类名。例如：name: dog将自动拓展为 .dog-enter ，.dog-enter-active等。默认类名为 “v”

appear

是否在初始渲染时使用过渡。默认为 false。

css

是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。

type

指定过渡事件类型，侦听过渡何时结束。有效值为 “transition” 和 “animation”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

mode

控制离开/进入的过渡时间序列。有效的模式有 “out-in” 和 “in-out”；默认同时生效。

duration

指定过渡的持续时间。
可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

    <transition :duration="1000">...</transition>

也可以定制进入和移出的持续时间：

    <transition :duration="{ enter: 500, leave: 800 }">...</transition>

注意

同时使用过渡和动画时，需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
因为浏览器并不知道使用的是animate的时长，还是transition的时长。假如整体使用transition的时长

    <transition  name="dog"  type='transition'">...</transition>

来源：https://www.icode9.com/content-4-775951.html

赞 (0)

相关推荐