Scss、elementUI引入、transition动画 - 学习笔记

野性酷女 2023-01-24 04:20 309阅读 0赞

### 文章目录 ###

*   *  Scss、elementUI引入、transition动画 - 学习笔记
     *   *  Sass 是什么？
         *  elementUI
         *  transition动画

## Scss、elementUI引入、transition动画 - 学习笔记 ##

### Sass 是什么？ ###

官网：[https://www.sass.hk/guide/][https_www.sass.hk_guide]  
Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

**特性概览**  
CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

**Scss 与 Sass的区别**  
Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：  
1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。  
2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号(\{\})和分号;，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。  
**安装**

npm install node-sass -save-dev
    npm install sass-loader@^7.3.1 --save-dev
    npm install style-loader --save-dev

![在这里插入图片描述][c066becd8269d296f976e842b407168a.png]  
**–save -dev区别**  
–save：将保存配置信息到pacjage.json的dependencies节点中。

–save-dev：将保存配置信息到pacjage.json的devDependencies节点中。

dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块

devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。

**变量声明**

$highlight-color: #F90;
    $lightColor: #ffffff;
    $darkColor: #000000;
    $redColor : #f00;
    $blue-color: blue;

**变量引用：**

border:1px solid $darkColor;

**嵌套CSS 规则**  
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：

#content article h1 {  color: #333 }
    #content article p {  margin-bottom: 1.4em }
    #content aside {  background-color: #EEE }

像这种情况，sass可以让你只写一遍，且使样式可读性更高。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content { 
      article { 
        h1 {  color: #333 }
        p {  margin-bottom: 1.4em }
      }
      aside {  background-color: #EEE }
    }

**父选择器的标识符&**

article a {  color: blue }
    article a:hover {  color: red }
    
    article a { 
      color: blue; &:hover {  color: red }
    }

**群组选择器的嵌套**

.container h1, .container h2, .container h3
     {  margin-bottom: .8em }
    
    .container { 
      h1, h2, h3 { margin-bottom: .8em}
    }

**子组合选择器和同层组合选择器：>、+和~**  
选择器> 选择一个元素的直接子元素。

article section {  margin: 5px }
    article > section {  border: 1px solid #ccc }

同层相邻组合选择器+选择header元素后紧跟的p元素

header + p {  font-size: 1.1em }

同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：

article ~ article {  border-top: 1px dashed #ccc }

.div1 { 
      color:$blue-color; .div2 { 
        border:1px solid $darkColor; .div3{ 
          font-size:14px;
          color:lighten($darkColor,70%); &>a { 
            color:lighten($darkColor,70%);
          }
        }
      }
    }

article { 
      ~ article {  border-top: 1px dashed #ccc }
      > section {  background: #eee }
      dl > { 
        dt {  color: #333 }
        dd {  color: #555 }
      }
      nav + & {  margin-top: 0 }
    }

**嵌套属性**

nav { 
      border-style: solid;
      border-width: 1px;
      border-color: #ccc;
    }
    
    nav { 
      border: 1px solid #ccc { 
      left: 0px;
      right: 0px;
      }
    }

**混合器**  
混合器使用@mixin标识符定义

@mixin rounded-corners { 
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }

通过@include来使用这个混合器，放在你希望的任何地方

notice { 
      background-color: green;
      border: 2px solid #00aa00;
      @include rounded-corners;
    }

### elementUI ###

官网：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

安装

npm i element-ui -S

main.js中引入

import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    
    Vue.use(ElementUI);

### transition动画 ###

官网：[https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v2_guide_transitions.html]  
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。  
包括以下工具：  
在 CSS 过渡和动画中自动应用 class  
可以配合使用第三方 CSS 动画库，如 Animate.css  
在过渡钩子函数中使用 JavaScript 直接操作 DOM  
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

**例子：**  
![在这里插入图片描述][ddf8919cece7fe2cc0795e1597d1ca87.png]  
![在这里插入图片描述][76e09c2779de2de79e27666483f316ae.png]  
**动画的处理过程**  
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：  
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。  
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。  
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)  
**过渡的类名**  
**在进入/离开的过渡中，会有 6 个 class 切换。**  
**v-enter**：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。  
**v-enter-active**：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。  
**v-enter-to**: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。  
**v-leave**: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。  
**v-leave-active**：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。  
**v-leave-to**: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。  
![在这里插入图片描述][2bc45d61731f66505ae2355144be1efd.png]

<template>
      <div>
        <button @click="flag=!flag">click</button>
        <transition name="abc">
          <p v-if="flag">hello</p>
        </transition>
      </div>
    </template>
    
    <script> export default { data(){ return { flag:true } } } </script>
    <style lang="scss"> .abc-enter-active,.abc-leave-active{ transition:opacity 1s ease; } .abc-enter,.abc-leave-to{ opacity:0 } </style>

[https_www.sass.hk_guide]: https://www.sass.hk/guide/
[c066becd8269d296f976e842b407168a.png]: /images/20221004/534f230edcf54b7cb75b3e13de09d4a2.png
[https_element.eleme.cn_zh-CN]: https://element.eleme.cn/#/zh-CN
[https_cn.vuejs.org_v2_guide_transitions.html]: https://cn.vuejs.org/v2/guide/transitions.html
[ddf8919cece7fe2cc0795e1597d1ca87.png]: /images/20221004/0d6548c5a2d74d52b17a02e7d698d53e.png
[76e09c2779de2de79e27666483f316ae.png]: /images/20221004/7c4d137081f84f61acde43de6e108854.png
[2bc45d61731f66505ae2355144be1efd.png]: /images/20221004/3f95af6252204e16939dd052b0c7dc5c.png