CSS 动画实现元素从右到左插入

CSS 动画 让一个元素从右到左插入

<div class="container">
  <div class="left">
    flex 1
    <button>点击打开右边栏</button>
  </div>
  <div class="right">从右到左</div>
</div>

<script>
  const btn = document.querySelector('button')
  const right = document.querySelector('.right')
  btn.addEventListener('click', () => {
    right.style.['margin-right'] = 0
  })
</script>

<style>
  .container {
    display: flex;
    justify-content: space-between;
    width: 200px;
    height: 100px;
    border: 1px solid;
  }
  .left {
    flex: 1;
    border: 1px solid;
  }
  .right {
    border: 1px solid;
    width: 400px;
    margin-right: -400px;
    transition: margin-right 1s;
  }
</style>

还有另外几种用 js 实现的方法

document.getElementById("ele").style.backgroundColor = "#f00";

document.styleSheets[0].insertRule(
  `@keyframes example {
		0% {background-color: red;}
		100% {background-color: yellow;} }`,
  0
);

document.getElementById("ele").style.animation = "example 1s linear";

document.getElementById("ele").style.transition = "width 5s linear";
document.getElementById("ele").style.transition =
  "-webkit-transform 1000ms  linear";
document.getElementById("ele").style.webkitTransform = "scale(1) scale(0.65)";