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 选择器 属性选择器介绍
Jan 21 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python 修改本地网络配置的方法
2019/08/14 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python如何实现复制目录到指定目录
2020/02/13 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
中软Java笔试题
2012/11/11 面试题
创意广告词
2014/03/17 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python