vue自定义transition样式前缀名

默认情况下，控制 transition 样式的类名是以 'v-' 为前缀，我们可以自定义前缀名

具体代码

代码解析：

将前缀名改为'pretty'

<transition name="pretty">
    <div class="img" v-if="flag">
        <img :src="img" alt="" width="150">
    </div>
</transition>

动画效果

.pretty-enter,
.pretty-leave-to {
    opacity: 0;
    transform: translateY(200px);
}

.pretty-enter-active,
.pretty-leave-active {
    transition: all 1.5s ease;
}

更多vue.js的有趣实例，请点击移步至目录