Vue第10天笔记：Vue动画（了解）、yarn命令的安装、webpack：介绍、基本步骤使用、npm中 --save和 --save-dev的区别、scripts的使用、配置到文件中、自动生成插件

最新推荐文章于 2024-06-18 13:32:42 发布

库库好困

最新推荐文章于 2024-06-18 13:32:42 发布

阅读量1k

点赞数

分类专栏：十：VUE 文章标签： vue

本文链接：https://blog.csdn.net/m0_46597922/article/details/107773284

版权

前一天复习

1. 自定义指令
  (1) 定义使用
    Vue.directive(指令名, 指令的配置对象)
  (2) 五个钩子函数
    bind
    inserted
    update
  (3) 钩子函数的参数
    el 指令所在的元素
    binding 指令相关的信息对象
      (1) name 指令名
      (2) value 指令值
      (3) arg 指令的参数
      (4) modifiers 指令的修饰符

2. 动画
  vue中的动画, 用于快速实现转场动画 (进入离开 显示隐藏)
  (1) 用 transition 标签, 将需要动画的盒子包裹
      <transition> 
        <h1></h1>
      </transition>

  (2) 就有了动态切换的六个类
      v-enter
      v-enter-to
      v-enter-active
      v-leave
      v-leave-to
      v-leave-active

  (3) 给transition添加 name 属性, 可以自定义切换类名的前缀
      <transition name="box"> 
        box-enter
        box-enter-to
        box-enter-active
        box-leave
        box-leave-to
        box-leave-active

vue - 动画(了解)

vue 动画 - 过渡实现

转场动画, 切换元素的显示隐藏

vue中提供了transition标签包裹元素
配合6个类名实现这个效果 (特定的时机, 添加特定的类名)

transtion 没指定 name, 6个类名, 默认都是 v- 开头的

transition 指定 name 属性, name=“fade”, 6个类的名字都是 fade开头的

v-enter 盒子准备要显示时
v-enter-to 盒子完全显示时
v-enter-active 盒子在显示的动画过程中
v-leave 盒子准备要离开时
v-leave-to 盒子完全离开时
v-leave-active 盒子在离开的动画过程中

vue 动画 - 动画实现

入场: 0 => 2 => 1

xx-enter-active 入场动画

xx-leave-active 离场动画

定义动画

@keyframes 动画名称 {
   
    0% {
   
        ...
    }
    50% {
   
        ...
    }
    100% {
   
        ...
    }
}

使用动画
.box {
   
    animation: 动画名称 动画时间;
}

vue 动画 - 通过 animate.css 实现

transition 包裹住元素
配置 enter-active-class

leave-active-class

代码演示：

  <style>
    div {
    
      width: 300px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <!-- 
    1. 下载 npm i animate.css

    2. 引包

    3. 使用
       (1) 核心基础类 animate__animated
       (2) 具体哪个动画 animate__XXX
           animate__bounce 弹跳
           animate__rubberBand 橡皮糖
           animate__bounceOut 跳动离开
   -->
  <div class="animate__animated animate__bounce">我是盒子</div>
</body>

    <style>
      h1 {
   
        width: 400px;
        height: 300px;
        line-height: 300px;
        border-radius: 30px;
        margin: 100px auto;
        background-color: pink;
        text-align: center;
      }

    </style>
  </head>
  <body>
    <div id="app">
      <button @click="isShow = !isShow">切换</button>
      <transition
        enter-active-class="animate__animated animate__rubberBand"
        leave-active-class="animate__animated animate__bounceOut"
      >

最低0.47元/天解锁文章

库库好困

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue第10天笔记：Vue动画（了解）、yarn命令的安装、webpack：介绍、基本步骤使用、npm中 --save和 --save-dev的区别、scripts的使用、配置到文件中、自动生成插件

前一天复习1. 自定义指令 (1) 定义使用 Vue.directive(指令名, 指令的配置对象) (2) 五个钩子函数 bind inserted update (3) 钩子函数的参数 el 指令所在的元素 binding 指令相关的信息对象 (1) name 指令名 (2) value 指令值 (3) arg 指令的参数 (4) modifiers 指令的修饰符2. 动画 vue中的动
复制链接

扫一扫