javascript - CSS 错误，在父项上隐藏了不透明度、模糊和溢出的过渡

Question

我写了一个简单的函数，它在鼠标悬停时实现模糊图像的不透明度。请注意，父级小于子级（图像），我需要隐藏溢出。您可以看到一个错误，在过渡结束时，图像大小突然改变！

如果我删除过渡，问题就会消失（但我想要过渡）
如果我提供模糊，问题就会消失（但我想要模糊）
如果父级大于子级，问题就会消失（但我希望父级更小并隐藏溢出
）参数的累积（不透明度过渡，模糊，溢出隐藏在父级上）会产生错误，我不知道如何修复它。

var my_parent = document.querySelector('.parent');
var my_child = document.querySelector('.child');

my_parent.addEventListener('mouseover', function() {
  my_child.style.opacity = '1';

  // SAME PROBLEM WITH ANIMATION
  // my_child.style.animationName = 'my_animation';   
  // my_child.style.animationDuration = '1s';
  // my_child.style.animationTimingFunction = 'ease-in-out';
  // my_child.style.animationIterationCount = 'linear';
  // my_child.style.webkitAnimationPlayState = 'running';
  // my_child.style.animationFillMode = 'forwards';
});

.parent {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.child {
  width: 250px;
  height: 250px;
  opacity: 0;
  -moz-filter: blur(40px);
  -o-filter: blur(40px);
  -ms-filter: blur(40px);
  filter: blur(40px);
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

@-webkit-keyframes my_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes my_animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="parent">
  <img class="child" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>

标签： javascriptcsstransitionopacityblur