uni 动态添加style_uniapp 使用动态style传参失败

在uniapp里面显示一个有服务器返回来的公告，我需要对这个公告实现一个跑马灯式效果，但是动态填充的动画特效参数无效，现在就想问问，怎么样才能正确传入参数给css里面的keyframes，我在最下面用了三种办法，一种常规动态填充，但是无效不报错；一种写死数值，但是有效；另一种就是类似vue里面的写法，虽然在HBuilderX报错，但是在微信开发者工具里面是有效的；

现在想问问，我到底要怎么写才能避免HbuilderX报错，又能让跑马灯效果实现出来？

下述出现的 marqueeWidth这个变量是由JavaScript里面计算出来的， 主要代码如下：

这是scss：

.announcement-content {

width:100%;

overflow: hidden;

.announcement-text {

display: inline-block;

white-space: nowrap;

animation-name: around;

animation-duration: 10s;

/*过渡时间*/

animation-iteration-count: infinite;

animation-timing-function: linear;

}

}

@keyframes around {

from {

margin-left: 100%;

}

to {

/* var接受传入的变量 */

margin-left: var(--marqueeWidth);

}

}

这是template：

{{announcement}}

{{announcement}}

{{announcement}}

第三种办法报这个错误：

style="--marqueeWidth:{{marqueeWidth}}em": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of

, use

.