过渡和动画
基本用法就是给我们需要动画的标签外面嵌套transition标签 ,并且设置name属性 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
在 CSS 过渡和动画中自动应用 class
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
// v要替换成transition组件的name属性值
v-enter：定义进入过渡的开始状态。
v-enter-active：定义进入过渡生效时的状态。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。
v-leave: 定义离开过渡的开始状态。
v-leave-active：定义离开过渡生效时的状态。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。示例：
代码语言：javascript复制<style>
.box {
position: absolute;
left: 0;
top: 50px;
width: 100px;
height: 100px;
background-color: red;
}
.slide-enter, .slide-leave-to {
left: 200px;
opacity: 0;
}
.slide-enter-active, .slide-leave-active {
transition: all 2s;
}
.slide-enter-to, .slide-leave {
left: 0px;
opacity: 1;
}
</style>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="slide">
<div v-show="isShow" class="box"></div>
</transition>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: true
}
});
</script>自定义过渡动画的类名
可以通过transition组件自定义过渡动画的类名，可以方便结合第三方的动画库使用，比如：animate.css
代码语言：javascript复制// transition组件的属性
enter-class
enter-active-class
enter-to-class (2.1.8 )
leave-class
leave-active-class
leave-to-class (2.1.8 )示例：
代码语言：javascript复制<button @click="isShow = !isShow">toggle</button>
<transition
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut">
<div v-show="isShow">hello</div>
</transition>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: true
}
});
</script>vue-cli
为什么要用vue-cli
可以快速创建vue项目结构,而不需要我们一点点的去创建/管理项目所需要的各种文件夹/文件
什么是vue-cli
代码语言：javascript复制vue-cli是npm包
vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。使用vue-cli
代码语言：javascript复制# 安装 Vue CLI 脚手架
# 如果已经安装过则不需要
# 这里安装的是最新版本 3版本
npm install -g @vue/cli
# 执行vue --verson查看是否安装成功，
# 显示vue的版本，就是安装成功了
vue -V
# 如果仍然要使用vue-cli 2版本的指令 需要安装一个桥接工具
npm install -g @vue/cli-init
# 使用脚手架工具初始化你的项目
# webpack-simple是一种工程模板
vue init webpack-simple 项目名称
# 进入你初始化好的项目
cd 项目路径
# 安装项目模板所需要的依赖
npm i
# 启动开发模式
# 或者 npm start
npm run dev运行npm run dev后,会在浏览器中看到如下效果:
