首页 > 其他分享 >Animate.css + Vue2

Animate.css + Vue2

时间:2024-02-06 14:45:24浏览次数:27  
标签:www Vue2 vue2 Animate animate css

Animate.css + Vue2
包:https://www.npmjs.com/package/vue2-animate
安装:

npm install --save vue2-animate

导入:

import 'vue2-animate/dist/vue2-animate.min.css';

使用1:

<transition name="fadeLeft" >
    <p v-if="isShow">hello</p>
</transition>

使用2:

<transition-group name="fadeLeft" tag="ul">
    <li v-for="item in items" :key="item.id">
        {{ item }}
    </li>
</transition-group>

标签:www,Vue2,vue2,Animate,animate,css
From: https://www.cnblogs.com/cqpanda/p/17298488.html

相关文章

  • vue2中el-tree组件实现双击树的节点来修改节点名称
    目标在没双击之前,树的节点是文本样式。在双击之后,节点位置变成输入框形式,原节点的名称显示在输入框中,可以进行修改。修改完毕之后,当输入框失去焦点的时候,输入框消失,又变成原本的文本样式,并且显示的是修改后的节点名称。添加一个树<template><div><el-tree......
  • vue2 bpmn添加属性栏
    安装"bpmn-js-properties-panel":"^1.6.1"引入样式库import{ BpmnPropertiesPanelModule, BpmnPropertiesProviderModule,}from"bpmn-js-properties-panel";import"bpmn-js-properties-panel/dist/assets/properties-panel.css"......
  • css的使用
    font连写font-style设置文字是否倾斜font-weight设置文字是否加粗font-family设置文字类型,例如宋体文字连写格式:{font:font-stylefont-weightfont-sizefont-family}例如:p{font:normol70020px"宋体"}text-decoration设置文本划线位置(a标签一般会去掉下划线)underline设......
  • css实现 背景重复线条 实现盒子四个角发光效果 实现内阴影加边框发光效果
     背景重复线条 width:100%;height:100%;//background-color:rgba(51,73,102,1);background-image:linear-gradient(toleft,#3349660.02rem,transparent0.01rem);background-repeat......
  • vue2中el-tree组件实现右键菜单功能
    目标右键点击树组件中的节点,弹出增删改的菜单,要求菜单总是在点击位置的附近先添加一个树<template><div><el-tree<!--绑定数据-->:data="tree"highlight-currentnode-key="id":props=&quo......
  • CSS3属性之 text-overflow:ellipsis
    语法:text-overflow:clip|ellipsis默认值为clip不显示省略标记clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法:text-overflow:ellipsis;overflow:hidden;white-sp......
  • CSS特效
    水波球HTML<divclass="container"><divclass="wave"></div></div>CSS3代码/*容器显示外层圆框和居中*/.container{position:absolute;width:150px;height:150px;......
  • vue2中使用富文本编辑器tinyMCE全过程
    TinyMCE中文文档地址:http://tinymce.ax-z.cn/1.安装[email protected]$npminstall@tinymce/[email protected].将node_modules/tinymce文件夹下的plugins文件夹和skins文件夹直接复制到public/tinymce目录下3.引入汉语包在plublic/tinymce文......
  • 基础02-css篇
    二、CSS部分1 css sprite是什么,有什么优缺点 概念:将多个小图片拼接到⼀个图片中。通过background-position 和元素尺寸调节需要显示的背景图案。 优点:  减少HTTP请求数,极大地提高页面加载速度 增加图片信息重复度,提高压缩比,减少图片大小 更换⻛格⽅便,只......
  • 【CSS】第九讲:文本属性(上)
    不积跬步无以至千里@放纵lili一、颜色属性(一)、基本语法:color:颜色英文单词/颜色的十六进制/颜色的RGB(二)、属性:1、颜色英文单词。如:red(红色)、blue(蓝色)示例:2、颜色的十六进制数使用“#”加一个十六进制数表示颜色值。例如:#ff0000(红色)3、颜色的RGB值RGB代码的颜色值,例如:rgb(255,0,0)-----......