Vue过渡和动画

最新推荐文章于 2024-06-26 18:16:27 发布

哈哈哈AZ

最新推荐文章于 2024-06-26 18:16:27 发布

阅读量129

点赞数

分类专栏：杂草文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_43965644/article/details/129707996

版权

杂草专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 了解过渡和动画的含义

2 掌握内置过度类名及自定义类名的使用

3 掌握使用钩子创建动画的方法，

4 掌握

过渡和动画

1 什么是过渡和动画

过渡：

从一个状态向另一个状态插入值，新的状态替换旧的状态

内置过渡组件：
<transition name="fade">
<!-- 需要添加过渡的div标签 -->
<div></div>
</transition>

<transition>标签搭配CSS可以做成动画

2 transition组件

Vue为<transition>标签内部的元素提供了三个进入和三个离开过渡的类

Opacity：透明度

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 图形的初始状态 */
    .chart {
      width: 200px;
      height: 50px;
      background-color: orange;
    }
    /* 进入和离开的过程 */
    .box-enter-active, .box-leave-active {
      transition: width 3s;  /* width的变化，动画时间是3秒 */
    }
    /* 进入初始状态 和 离开的结束状态*/
    .box-enter, .box-leave-to {
      width: 0px;
    } 
    /* 进入的结束状态 和 离开的初始状态 */
    .box-enter-to, .box-leave {
      width: 200px;
    }
  </style>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="toggle">改变图形宽度</button>
    <transition name="box">
      <div class="chart" v-if="show"></div>
    </transition>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        show: true,
      },
      methods: {
        toggle () {
          this.show = !this.show   // 每次都取反
        }
      }
    })
 </script>
</body>
</html>

3 自定义类名

如果使用自定义类名则不需要给transition标签设置name属性

自定义类名是通过属性来设置的

进入：enter-

自定义类名的优先级高于普通类名，所以能很好的与其他第三方CSS库结合使用

哈哈哈AZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue过渡和动画

过渡：从一个状态向另一个状态插入值，新的状态替换旧的状态内置过渡组件：-- 需要添加过渡的div标签 -->标签搭配CSS可以做成动画如果使用自定义类名则不需要给transition标签设置name属性自定义类名是通过属性来设置的进入：enter-自定义类名的优先级高于普通类名，所以能很好的与其他第三方CSS库结合使用。
复制链接

扫一扫