<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>动画</title>
<script type="text/javascript" src="vue.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
p {
width: 300px;
height: 300px;
background: red;
margin: 10px auto;
}
</style>
<script type="text/javascript">
window.onload = function(){ var app = new Vue({
el:'#box',
data:{
show:false
}
})
} </script></head><body>
<div id="box">
<!-- 控制数据的值切换显示隐藏 -->
<button @click="show=!show">transition</button>
<!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition> -->
<!-- 第二种方法 -->
<!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition> -->
<!-- 多元素运动 -->
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" :key="1"></p>
<p v-show="show" class="animated" :key="2"></p>
</transition-group>
</div></body></html>vue过渡和animate.css结合使用
-
Intellij idea 如何关闭无用的提示
Linux：Settings —> Editor —> Inspections —> General —> Duplicated Code Mac：Preferences --> Editor —> Inspections —> General —> Duplicated Code fragment 将对应的勾去掉。
-
神秘的 shadow-dom 浅析，shadow-root
顾名思义， shadow-dom，直译的话就是 影子dom ？我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵的 DOM 结构。前端同学经常用开发者工具的话，查看 DOM 结构的时候，肯定看到过下面这样的结构：
-
懒人神器：svg-sprite-loader实现自己的Icon组件
svg-sprite-loader会把你的icon塞到一个个symbol中，symbol的id如果不特别指定，就是你的文件名。它最终会在你的html中嵌入这样一个svg， 你就可以像上面这样：
-
前端实战-基于Nuxt的SVG使用
虽然我们在日常开发的时候，在使用iview 或者element ui等组件时，通常会包含一些常用icon；但是在面对一些特定的需求时，或者自己想high一下，这些通用的icon并不能很好的满足我们。这个时候我们可能会拿到一些SVG适量图，但是怎么去使用这些矢量图呢。
-
用CSS给SVG 的内容添加样式
SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG<use> 元素在文档中任意位置“实例化”图标。 使用<use>元素实例化图标或任何其它的SVG元素或图像，给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决：使用<use>引入的内容添加样式受限的问题。 但是在开始之前，我们先快速浏览一下SVG的主要结构和分组元素，然后慢慢进入use的世界中，以及shadow DOM，然后重回CSS的怀抱。我们会逐步讲解为什么给<use>内容添加样式会比较麻烦，以及有什么好的解决方案。
-
在vue项目中使用svg，并能根据需要修改svg大小颜色等样式
更改svg颜色，重点是去掉fill属性才能自由的更改颜色
-
display:flex的子元素无法设置宽度
子元素有个flex-shrink属性，表示在父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩；所以将子元素（图片）添加属性：flex-shrink:0;即
-
axios文件上传功能+formData
在项目中使用axios上传文件，记得new一个纯净的axios或者考虑用ajax请求。因为axios在项目估计已经用了全局配置请求头等信息，这里的配置可能被全局请求头拦截，导致请求失败。 2.1构造formData 作者：exmexm 链接：https://www.jianshu.com/p/9c708a47d8a5 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
-
使用import() 按需引入时如何写绝对路径？
nuxtjs，插件开发，import，绝对路径
-
CSS中的 “var()” 和 “:root”
var() var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）