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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 HTML / CSS
CSS list-style-type属性使用方法
May 21 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读取csv数据保存到数组的方法
2015/01/03 PHP
PHP检测用户语言的方法
2015/06/15 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
python负载均衡的简单实现方法
2018/02/04 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
MYSQL基础面试题
2012/05/13 面试题
廉洁自律承诺书
2014/03/27 职场文书
超市工作总结范文2014
2014/12/19 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
聚会通知怎么写
2015/04/23 职场文书
表扬信范文
2015/05/04 职场文书
现实表现证明材料
2015/06/19 职场文书
五年级作文之想象作文
2019/10/30 职场文书
mysql知识点整理
2021/04/05 MySQL
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
Python实现简单得递归下降Parser
2022/05/02 Python