美文网首页
23.Vue封装的过度与动画

23.Vue封装的过度与动画

作者: 黑咔 | 来源:发表于2019-03-21 18:02 被阅读0次

一、过度与动画

  1. 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。

  2. 写法:

    1. 准备好样式:

      • 元素进入的样式:
        1. v-enter:进入的起点
        2. .v-enter-active 进入过程中
        3. v-enter-to:进入的终点
      • 元素离开的样式:
        1. v-leave:离开的起点
        2. .v-leave-active 离开过程中
        3. v-leave-to:离开的终点
    2. 使用<transition>包裹要过度的元素,并配置name属性:

      <transition name="hello">
        <h1 v-show="isShow">你好啊!</h1>
      </transition>
      
    3. 备注:若有多个元素需要过度,则需要使用:<transition-group>,且每个元素都要指定key值。

二、Vue集成使用第三方动画库

https://animate.style/

  1. 安装第三方动画库: npm install animate.css

  2. 引入第三方动画库: import 'animate.css';

  3. name属性为 name="animate__animated animate__bounce"

  4. 复制需要使用的动画做为enter-active-classleave-active-class的属性值

    复制需要使用的动画
代码实例:
<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp"
    >
      <h1 v-show="!isShow" key="1">Hello!</h1>
      <h1 v-show="isShow" key="2">Achilles!</h1>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css'

export default {
  name: 'Test',
  data() {
    return {
      isShow: true
    }
  },
}
</script>

<style scoped>
h1 {
  background-color: orange;
}
</style>

相关文章

  • 23.Vue封装的过度与动画

    一、过度与动画 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。 写法:准备好样式:元素进...

  • 封装的过度与动画

    1.作用:在插入、更新、移除 DOM 元素时,在合适的时候给元素添加样式类名2.写法:(1)准备好样式:v-ent...

  • 过度与动画

    Vue封装的过度动画与动画 1、作用:在插入、更新或移除DOM时,在合适的时候给元素添加样式类名。 2、E...

  • iOS 切换root的淡入淡出效果

    切换window的root时经常需要一些过度动画,下面是效果的封装

  • vue零基础开发028——Vue中的动画封装

    【动画封装(不带效果)】 【动画封装(效果一起)】

  • Day15(JS动画,JS获取CSS属性,demo 导航缓动)

    JS动画 动画的原理盒子自身的 offsetLeft + 步长;封装动画封装匀速动画:Math.abs()绝对值 ...

  • 视图转场动画与动画封装

    自定义视图切换动画 需要先了解下面的效果对应的代码宏(系统里面直接可以调用的)kCATransitionFade ...

  • 过度动画

    要在网页中实现动画效果他必须有三要数; 1;元素的属性值要有变化; 2;要告诉系统那个元素的那个属性要变化;tra...

  • 过度动画

    css3过度动画 css3都有哪些新增的东西 : 过度,动画,阴影,圆角; transition : width ...

  • 过度动画

    1, 创建一个项目vue init webpack fullpage 3,运行项目 4,网页打开 6,使用数据设置...

网友评论

      本文标题:23.Vue封装的过度与动画

      本文链接:https://www.haomeiwen.com/subject/htozpqtx.html