<!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结合使用
-
icomoon使用详细介绍
此篇博文讲述如何利用icomoon导入图标,从而把自己想要的都通过icomoon方式进行,大家都知道,网站以及移动端,用图标还是尽量选择这种。因为直接用image有些图标会失真,从而也是前端开发之中,需求去掌握的一项,很简单的就几个步骤。
-
Iconfont 多色图标和渐变色图标的应用
虽然能实现多色图标,但是缺点是只能改一种颜色。
-
icomoon和Iconfont的区别,哪一个好用
在icomoon和Iconfont之间我们改如何选择呢?
-
vuetify和@nuxt/vuetify icon 之我见
vuetify中v-icon,貌似默认支持 Material Design Icons, Material Icons, Font Awesome 4 and Font Awesome 5, 我自己单独引入了vuetify 用哪一个图标都没有问题。但是用了@nuxt/vuetify只能用mdi-home这样的。不知道因为啥。肯定是封装后,封装成一个了。 但是我修改vuetify的设置,哪一个图标也都能用。哎,不过多研究了。
-
nuxtjs中单独引入Message组件的问题
// 引入elementUIimport { Message } from 'element-ui';//由于Message组件并没有install 方法供Vue来操作的,是直接返回的,因此按照官方文档单独引入的方法是//会报错的,需要给 Message 添加 install 方法Message.install = function (Vue, options) {Vue.prototype.$message = Message}Vue.use(Message )//消息提示
-
css的var()函数
随着sass,less预编译的流行,css也随即推出了变量定义var函数。var()函数,就如同sass和less等预编译软件一样,可以定义变量并且进行对应的使用。
-
icon如何使用并制作多色图标
多色图标,应该是双色图标,我们需要同时用before和after等伪元素来组合出来一个双色图标。
-
对icomoon的误解,以及最快速的使用
此时需要注意顶部第一个选项,Quick Usage,一定要打开,Enable Quick Usage,谁让咱英语不好呢,这个时候会出现一个css连接,直接引用就好了,就可以随意使用图标了,引入这一个css就能实现我们的功能,省区引入太多文件的烦恼,你可以在浏览器打开这个css,可以看到里面把我们所用的文件整成base64了。所以挺好用的。
-
video标签视频不自动播放的问题
添加 muted 属性,就可以通过地址栏进入网页的时候自动播放了,手机端还是有的有限制的,比如iphone浏览器,就不行,苹果手机为了保护用户的流量和用户的意愿,是禁止自动播放的,必须有手动触发。
-
nuxt+pm2 自动化部署及打包后文件自动上传阿里云 oss(精华)
部署nuxtjs,这一篇文章就够了,pm2 代码自动发布依赖于 git 工具,先将 ssh 密钥配置再你的代码仓库(github 或者 gitLab),具体操作自行 google 或者点击github 配置 ssh。 使用 ssh 密钥链接服务器 s $ ssh-copy-id root@1.2.3.4 # 把本机的 SSH 秘钥添加至服务器,配置成功后,以后就不需要再执行这条 SSH 命令了