我写的这个vue的动画效果，总出不来效果，怎么回事？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>动画</title> <style> .content { width: 200px; height: 200px; border: 1px solid #ff0000; } .xxx-enter-active, .xxx-leave-active { transition: background 5 ease; } .xxx-enter { background: red; } .xxx-enter-to { background: blue; } .xxx-leave { background: red; } .xxx-leave-to { background: orange; } </style></head><body> <div id="root"> <button @click="toggle">toggle</button> <transition name="xxx"> <div class="content" v-show="isShow">{{content}}</div> </transition> </div> <script> new Vue({ el: "#root", data: { content: "我是内容", isShow: true }, methods: { toggle: function() { this.isShow = !this.isShow } } }) </script></body></html> |
<template><div id="demo"><div id="root"><button @click="handleClick">切换</button><transition name="fade"><div class="content"v-show="show">hello world</div></transition></div></div></template><script>exportdefault{data() {return{show:true};},methods: {handleClick:function() {this.show = !this.show;}}};</script><style lang="less"scoped>.content {width: 200px;height: 200px;border: 1px solid#ff0000;}.fade-enter,.fade-enter-active {transition: background 3s;background: orange;}.fade-leave-to,.fade-leave-active {transition: background 3s;background: pink;}</style>亲，vue专区提问。还有这不叫动画
哈哈？是点击收起和展开么