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

Question

我想把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>

然而并达不到预想中的效果，样式文件并没有被应用

为何会这样呢

Answer 1

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

Answer 2

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

Answer 3

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