Vue动画,删除表格动画案例，调用animate.css动画库

最新推荐文章于 2023-05-06 08:49:36 发布

空谷丶幽兰

最新推荐文章于 2023-05-06 08:49:36 发布

阅读量703

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/110558773

版权

这篇博客介绍了如何在Vue中使用animate.css库来创建删除表格的过渡动画，详细阐述了transition属性和transform属性在动画效果中的应用，并展示了具体的动画效果。

摘要由CSDN通过智能技术生成

Vue动画：

		1.做动画的dom元素必须是块级元素（display:block）
		2.做动画的元素要用<transition></transition>或者<transition-group></transition-group>包裹住
		3.transition标签是Vue中的标签，要引入包之后才能使用
		4.transition只能给单个DOM元素来添加动画效果，不能给v-for渲染出来的元素使用
		5.transition-group用来包裹v-for渲染出来的元素或者多个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .v-enter,.v-leave-to{
   
            opacity: 0;
            transform: translateX(1000px);
        }
        .v-enter-active,.v-leave-active{
   
            transition: all 3s ease;
        }
        .an-enter,.an-leave-to{
   
            opacity: 0;
            transform: translateX(500px);
        }
        .an-enter-active,.an-leave-active{
   
            transition:all 2s ease;
        }
    </style>
</head>
<script src="vue.js"></script>
<body>
    <!-- 
        Vue动画效果
        vue给我们提供了一些做动画的效果
     -->
     <!-- 1.点击按钮实现p标签的显示与隐藏的切换 -->
     <div id="app">
     <input type="button" value="出来吧!" v-on:click="flag=!flag">
     <!-- 2.把要做动画的元素，用transition包裹住