我想要的效果是,文字从右向左滚动,超出左边部分不显示,该怎么做呢?
代码片段:https://developers.weixin.qq.com/s/brnOVTmj7aj6
class="aa">
class="bb">
class="notice" style="--marqueeTime--:10s;">
class="nn">{{event}}
.notice{
animation-name: around;
animation-duration: var(--marqueeTime--); /*过渡时间 从wxml传过来*/
animation-iteration-count: infinite; /*重复*/
animation-timing-function:linear; /*速度*/
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
@keyframes around {
0% {
margin-left: 100%;
}
100% {
margin-left: -600%;
}
}
.bb{
width: 92%;
/* margin-left: 4%; */
height: 4.5vh;
}
.aa{
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: center;
}
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that=this;
var text = '请确认已开启了网络流量,网络较差时会导致定位不准确,影响您的行程体验。超过两小时后,如果您没有继续驾乘,系统会主动结束您的行程订单,您的积分会按照实际里程计算。驾乘时途径山洞或隧道,会影响您的GPS定位信息,导致定位不准确。为了您的行车安全,驾乘时请不要盯着手机,系统会自动为您记录行程。';
that.setData({
event:text ,
})
},
你动画加到overflow组件上的。。当然不对了。。
你把动画加到nn那个class上
https://www.jb51.net/article/153611.htm
尝试加上 overflow:hidden;和will-change:transform,-webkit-transform;