Изменение CSS анимации точка привязки

Question

Я имею следующую страницу (см изображение)

При нажатии на красную кнопку, я хочу, чтобы анимировать DIV, когда он показывает пользователю. Тем не менее, я хочу, чтобы анимация появилась с кнопки. Сейчас анимация происходит из центра страницы.

Вот код, у меня есть

@keyframes fadeInScale { 
    0%{ 
     opacity:0; 
     transform: scale(0.5); 
    } 
    100%{ 
     opacity:1; 
     transform: scale(1); 
    } 
} 

@keyframes fadeOutScale { 
    0%{ 
     opacity:1; 
     transform: scale(1); 
    } 
    100%{ 
     opacity:0; 
     transform: scale(0.5); 
    } 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    z-index: 500; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

.fade-scale-in { 
    display: block; 
    animation: fadeInScale 0.3s 1 ease-out; 
} 

.fade-scale-out { 
    display: block; 
    animation: fadeOutScale 0.3s 1 ease-out; 
} 

Когда я нажимаю на красный круг, пользователь видит страницу наложения (которая на самом деле DIV с классом наложения, абсолютно позиционирован). Я добавляю класс fade-scale-in в div (с наложением класса). Затем div переходит из центра экрана и растет в соответствии с экраном пользователя. Я хочу, чтобы div переходил из красного круга. Могу ли я использовать преобразования, чтобы это произошло?

Вот код. Как вы заметили, когда вы нажимаете на желтом круге, ДИВ одушевляет от центра, а не от желтого круга: https://jsfiddle.net/e4g71y4m/3/

Answer 1

Вы можете сделать это путем добавления transform-origin: top left; к .overlay элементу. (Не забудьте префиксы (-webkit, -moz и т.д.)

var overlay$ = $('.overlay'); 
 
overlay$.bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) { 
 
    console.debug('test'); 
 
    if (e.animationName !== undefined && e.animationName == "fadeOutScale") { 
 
    overlay$.addClass('hide'); 
 
    } else if (e.originalEvent.animationName !== undefined && e.originalEvent.animationName == "fadeOutScale") { 
 
    overlay$.addClass('hide'); 
 
    } 
 
}); 
 

 
$('.click').on('click', function() { 
 
    overlay$.removeClass('hide').addClass('fade-scale-in'); 
 
}); 
 
$('.click-again').on('click', function() { 
 
    overlay$.removeClass('hide').addClass('fade-scale-out'); 
 
});

@keyframes fadeInScale { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(0.5); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    } 
 
} 
 

 
@keyframes fadeOutScale { 
 
    0% { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(0.5); 
 
    } 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    z-index: 500; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: red; 
 
    transform-origin: top left; 
 
} 
 

 
.click { 
 
    background: yellow; 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.fade-scale-in { 
 
    display: block; 
 
    animation: fadeInScale 0.3s 1 ease-out; 
 
} 
 

 
.fade-scale-out { 
 
    display: block; 
 
    animation: fadeOutScale 0.3s 1 ease-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="click">Click me</div> 
 
<div class="overlay hide"> 
 
    Test 
 
    <div class="click-again">Click me again</div> 
 
</div>