vue animate.css训练动画案例 列表循环

制作目标动画:向上入场添加数据,点击数据右滑动离场

简单页面效果:

实现代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <script type="text/javascript" src="js/vue.js" ></script>
        <style type="text/css">
            .box li{
                width: 300px;
                line-height: 30px;
                margin: 5px;
                padding: 0 10px;
                border: 1px dashed royalblue;
                list-style: none;
            }
            .box li:hover{
                background-color: royalblue;
                color: #fff;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="app">
            id: <input type="text" v-model="id"/>
            name: <input type="text" v-model="name"/>
            <button @click="add">添加</button>
            <ul class="box">
                <transition-group enter-active-class="animated slideInUp" leave-active-class="animated slideOutRight" >
                    <li v-for="item in list" :key="item.id" @click="del(item.id)">{{item.name}}</li>
                </transition-group>
            </ul>

        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:‘#app‘,
                data:{
                    list:[
                        {id:1,name:‘xiaoxiao‘},
                        {id:2,name:‘maomao‘},
                        {id:3,name:‘dada‘},
                        {id:4,name:‘hehe‘},
                    ],
                    id:‘‘,
                    name:‘‘
                },
                methods:{
                    add(){
                        this.list.push({id:this.id,name:this.name})
                    },
                    del(id){
                        var index = this.list.findIndex(function(item){
                            return item.id == id
                        })
                        this.list.splice(index,1)
                    }
                }
            })
        </script>
    </body>
</html>

原文地址:https://www.cnblogs.com/Mishell/p/12250680.html

时间: 2024-11-05 14:37:56

vue animate.css训练动画案例 列表循环的相关文章

vue中使用animate.css实现动画

1.npm install animate.css --save2.在main.js中 import animate from 'animate.css'; 3.使用: animated 不能漏 <view class="content animated fadeInRight"> 4. fade: { title: '淡入淡出', fadeIn: '淡入', fadeInDown: '向下淡入', fadeInDownBig: '向下快速淡入', fadeInLeft:

CSS--使用Animate.css制作动画效果

一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHu

Vue.js学习之条件v-if和列表循环v-for详解

本文将继续和大家分享Vue.js的基础知识,主要是介绍Vue.js的条件v-if和列表循环v-for的相关使用,一起来看看吧,希望可以帮助大家更好的学习Vue.js. v-if .v-else.v-show.还可以使用template <div v-if="ok">ok</div> <div v-else>No</div> <div v-show="ok">ok</div> <templa

JQuery插件之Animate.css和 jquery-aniview

Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些

vue+ webpack中的animate.css实现的执行多个连续的动画

1.安装 npm install animate.css 2.使用方法 入口文件App中进行引入 import animate from 'animate.css' 3.多个连续的动画 实现的效果:实现了三个蓝色方块依次以不同效果展现出来. 模板中代码: <template> <div class="hello"> <div class="box rotateIn" style="animation-duration:2s;a

node.js里面的声明周期和animate.css动画

1声明周期<template><div id="lifeinfo"><p>组件的生命周期</p><button @click="changeData">修改数据</button><p>{{msg}}</p></div></template><script>export default {name: "lifeinfo"

vue过渡和animate.css结合使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script type="text/javascript" src="vue.js"></script> <link rel="stylesheet&qu

写多个物件css3循环动画案例原理

div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animat

在Vue中使用 animate.css 库

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在Vue中使用 animate.css 库</title> <script src="./vue.js"></script> <link rel="stylesheet" type=&qu