vue动态插入的元素无法使用css

我想把md文章转html,使用的marked

在vue的create钩子上请求数据,待数据请求到后,调用marked解析md数据,然后插入到DOM中

created() {
    getArticle('/article').then(data => {    
        const div = document.createElement('div')
        div.classList.add('blog-article-content')
        div.innerHTML = marked(data.content)
        this.$el.appendChild(div)    
    })
}

然后我想让div出来的时候有一个出场动画,使用CSS3 Animation

<style lang="stylus" scoped>
    
    @keyframes content
        0%
            transform translateY(50%)
        
    .blog-article-content
        width 100%
        transform translateY(0)
        animation content 1s
        background-color pink

</style>

然而并达不到预想中的效果,样式文件并没有被应用
捕获.PNG

为何会这样呢

阅读 7.2k
3 个回答

注意 scoped,有可能 blog-article-content 没有在你这个组件生效,把全部代码贴上来看看

scoped去掉,你这个是动态插入元素,所以要用全局样式才可以。

style标签加上scoped后,样式选择器会加上版本后缀data-xxxx,你在模板中写死一个元素,给它加上blog-article-content类,刷新页面审查这个元素,看它应用的类名就知道为啥了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题