Question

我正在尝试创建一个带有圆的过渡，该过渡将扩展以填充容器宽度和高度的100％，但我似乎无法让DOM在过渡后保持可见。

我正在学习vue.js，所以我不确定这是否有意为什么有一种方法可以在圈子扩展到scale(100)时保持圆圈可见？有没有更好的方法来实现这一目标？

HTML：

<div id="app">
  <div v-show="show" :transition="zoomCircle" class="circle"></div>
  <button @click="show = ! show">zoom</button>
</div>

JS：

Vue.transition('zoom', {
  enterClass: 'zoomOut',
  leaveClass: 'zoomIn'
});
new Vue({
  el: '#app',
  data: {
    show: true,
    zoomCircle: 'zoom'
  }
});

相关小提琴： https://jsfiddle.net/joepaulgo/hkfg9vpr/

Answer 1

您设置了show: false，从而隐藏了该元素。删除v-show。
根本不需要Vue转换（用于隐藏/显示元素/组件），使用类绑定添加所需的类。
如果您希望它保留在最终形式中，则不应使用CSS动画，而应使用带有transform: scale(100)的简单CSS类，因为动画在完成后会更改回原始阶段。

不幸的是，我现在还记不起正确的CSS来实现这一过程。

编辑：得到它：https://jsfiddle.net/hkfg9vpr/3/

在vue.js中转换后保持DOM可见

1 个答案: