HTML#5(Vue3+javascript)

2022.9.6 今天学一点JavaScript的接口和vue3实现页面切换的方法

Javascript web接口

一、Document

 具体参考：Document - Web API 接口参考 | MDN (mozilla.org)

1.Document.createElement() 创建一个对象，参数tagNmae为标签名字，例如div等等

var element = document.createElement(tagName[, options]);

这个element可以添加子类，例如文本类

let newContent = document.createTextNode("Hi there and greetings!");
element.appendChild(newContent);

这样就给element这个div添加一个文本类

2.document.getElementById("div1");   通过id获取id=div1的元素

document.body.insertBefore(element, currentDiv);  从这个文本的body的currentDiv标签前面加一个element节点

class ExpandingList extends HTMLUListElement { 创建一个expandinglist类
  constructor() {
    super();
  }
}
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
let expandingList = document.createElement('ul', { is : 'expanding-list' })
创建新元素

二、Vue3

1、<Transition>组件(提供动画过渡效果)

(template)
<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>

下面这是对应的效果
(css)
.v-enter-active,  点击
.v-leave-active {
  transition: opacity 0.5s ease;  0.5秒渐变消失或出现
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
这样点一下button，hello就会消失，反之就会出现

Css过渡

1. v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。

2. v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

3. v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。

4. v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。

5. v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

6. v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

7. v-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力，我们将在下面的小节中看到一个示例。

8. (template)
   <Transition name="fade">
     ...
   </Transition>
   
   (css)
   .fade-enter-active,
   .fade-leave-active {
     transition: opacity 0.5s ease;
   }
   
   .fade-enter-from,
   .fade-leave-to {
     opacity: 0;
   }
   
   如果给transition命名，则v-enter-active变为对应的名字-enter-active

   可以配合第三方动画库 Animate.css

9. 可以传递以下class，和上面的作用差不多，只不过参数是一个类 {enter-from-class enter-active-class enter-to-class leave-from-class leave-active-class leave-to-class}

   <!-- 假设你已经在页面中引入了 Animate.css -->
   <Transition
     name="custom-classes"
     enter-active-class="animate__animated animate__tada"
     leave-active-class="animate__animated animate__bounceOutRight"
   >
     <p v-if="show">hello</p>
   </Transition>
   

   可以给Transition加一个type="animation"参数，就可以在transition里面使用animation了

（html）通过这种钩子来指定这些东西
<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>

（vue，script）
export default {
  // ...
  methods: {
    // 在元素被插入到 DOM 之前被调用
    // 用这个来设置元素的 "enter-from" 状态
    onBeforeEnter(el) {},

    // 在元素被插入到 DOM 之后的下一帧被调用
    // 用这个来开始进入动画
    onEnter(el, done) {
      // 调用回调函数 done 表示过渡结束
      // 如果与 CSS 结合使用，则这个回调是可选参数
      done()
    },

    // 当进入过渡完成时调用。
    onAfterEnter(el) {},
    onEnterCancelled(el) {},

    // 在 leave 钩子之前调用
    // 大多数时候，你应该只会用到 leave 钩子
    onBeforeLeave(el) {},

    // 在离开过渡开始时调用
    // 用这个来开始离开动画
    onLeave(el, done) {
      // 调用回调函数 done 表示过渡结束
      // 如果与 CSS 结合使用，则这个回调是可选参数
      done()
    },

    // 在离开过渡完成、
    // 且元素已从 DOM 中移除时调用
    onAfterLeave(el) {},

    // 仅在 v-show 过渡中可用
    onLeaveCancelled(el) {}
  }
}

利用transition可以进行页面切换，明天就可以开始写主界面了