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 11 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
PHP图片加水印实现方法
2016/05/06 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
js href的用法
2010/05/13 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
JS delegate与live浅析
2013/12/21 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python实现电子词典
2020/03/03 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
会计主管岗位职责
2014/01/03 职场文书
教师党员一句话承诺
2014/03/28 职场文书
艺术节主持词
2014/04/02 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
文明班集体申报材料
2014/05/23 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
新教师培训心得体会
2014/09/02 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记