CSS3 transition 实现通知消息轮播条


Posted in HTML / CSS onOctober 14, 2020

CSS3 transition 实现通知消息轮播条

Vue 版本,拷贝到文件即可使用

<template>
  <!-- 轮播视图 -->
  <div id="carousel-view">
    <!-- 轮播列表 -->
    <ul id="carousel-list-view" :class="{ 'carousel-animated':isAnimated }">
      <li v-for="(item, index) in dataSource" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 开启动画
      isAnimated: false,
      // 轮播数据
      dataSource: ['dzm', 'xyq', '啊啊']
    }
  },
  created () {
    // 开启定时器
    setInterval(this.scroll, 1000)
  },
  methods: {
    // 滚动动画
    scroll () {
      // 开启动画
      this.isAnimated = true
      // 倒计时动画时间
      setTimeout(() => {
        // 将数组第一个元素添加到数组尾部
        this.dataSource.push(this.dataSource[0])
        // 移除数组第一个元素
        this.dataSource.shift()
        // 关闭动画
        this.isAnimated = false
        // 动画时间需要与 .carousel-animated 中设置的时间一致
      }, 500)
    }
  }
}
</script>

<style scoped>
#carousel-view {
  width: 100%;
  height: 32px;
  background-color: red;
  overflow: hidden;
}
#carousel-list-view {
  margin: 0;
  padding: 0;
  list-style: none;
}
#carousel-list-view li {
  line-height: 32px;
  height: 32px;
}
.carousel-animated {
  transition: transform 0.5s;
  transform: translateY(-32px);
}
</style>

到此这篇关于CSS3 transition 实现通知消息轮播条的文章就介绍到这了,更多相关CSS3 transition轮播条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
animation和transition的区别
Oct 12 #HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 #HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 #HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 #HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 #HTML / CSS
Css3实现无缝滚动防抖
Sep 14 #HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 #HTML / CSS
You might like
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
jQuery 选择器理解
2010/03/16 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
用python写爬虫简单吗
2020/07/28 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
业务员自荐信范文
2014/04/20 职场文书
优秀党员先进材料
2014/12/18 职场文书
2015年教研工作总结
2015/05/23 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
python对文档中元素删除,替换操作
2022/04/02 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python