Vue 3分钟极速打造滚动公告

前端

2023-12-18 10:28:34

简介

Vue.js是一个用于构建用户界面的JavaScript框架，因其易学、高效、灵活等特点受到广泛欢迎。本文将指导你使用Vue.js在短短3分钟内创建一个令人印象深刻的滚动公告。

前提条件

在开始之前，你需要确保满足以下前提条件：

具备基本的HTML、CSS和JavaScript知识
已安装Node.js和npm
已安装Vue.js CLI

步骤

初始化Vue项目
```
vue create vue-scrolling-announcement
```

安装所需依赖

cd vue-scrolling-announcement
npm install vue-transition-group

创建组件

在src目录下创建一个名为ScrollingAnnouncement.vue的文件，并输入以下代码：

<template>
  <transition-group name="scrolling" tag="ul">
    <li v-for="message in messages" :key="message">{{ message }}</li>
  </transition-group>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      messages: ['公告一', '公告二', '公告三']
    }
  }
})
</script>

<style>
ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #eee;
  padding: 10px;
  margin: 5px 0;
  width: 100%;
}

.scrolling-enter-active {
  animation: scroll-in 1s;
}

.scrolling-leave-active {
  animation: scroll-out 1s;
}

@keyframes scroll-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes scroll-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
</style>