Javascript 使隐藏元素显示自身，然后使用转换移动

我该如何修复这段代码，使两个元素首先不再隐藏，然后使用转换平滑地向右移动。当元素没有开始隐藏时，它会工作，但当它开始隐藏时，它只会跳到端点。如何在不删除隐藏元素并将元素宽度减为零的情况下使其工作。？谢谢

var one=document.getElementById（'one'）；
var two=document.getElementById（'two'）；
函数myFunct（）{
two.style.display='flex'；
2.style.right='70%'；
}

#一个{
位置：绝对位置；
宽度：300px；
高度：100px；
边框：1px纯红；
}
#两个{
位置：绝对位置；
显示：无；
最小宽度：5px；
身高：100%；
过渡：1.5s；
-webkit转换：1.5s；
-moz转换：1.5s；
-ms转换：1.5s；
背景颜色：绿色；
右：0px；
}

---

首先使用

不透明度：0

而不是

显示：无

，使用

translateX

而不是

右

会更好

---

我还建议您，因为如果您使用大量动画和过渡，它会使动画和过渡更容易。

首先使用

opacity:0

而不是

display:none

，使用

translateX

而不是

right

会更好

我还建议您，因为如果您使用一组动画和过渡，它会使动画和过渡更容易。

尝试操作属性而不是显示：

函数myFunct（）{
two.style.visibility='visible'；
2.style.right='70%'；
}

#两个{
可见性：隐藏；
显示器：flex；
...
}

尝试操作属性而不是显示：

函数myFunct（）{
two.style.visibility='visible'；
2.style.right='70%'；
}

#两个{
可见性：隐藏；
显示器：flex；
...
}