0

Для wp есть плагин называется mistape https://mistape.com. При выделении текста и нажатии Ctrl+Enter он отправляет на почту выделенный текст. Так вот там очень крутая анимация отправки письма. Пример можете посмотреть на моем сайте https://tehremzona.ru. Я хочу ее вытащить что бы использовать в других местах, но у меня не получается(( можете помочь с этим вопросом? Может ее возможно просто вызвать когда мне это нужно?

2 ответа 2

1

Для overlay:

#mistape_dialog .dialog__overlay {
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

На событие добавляется opacity: 1;

Для формы:

#mistape_dialog.dialog--open .dialog__content {
    -webkit-animation-name: anim-open;
    animation-name: anim-open;
}

#mistape_dialog.dialog--open .dialog__content, #mistape_dialog.dialog--close .dialog__content {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes anim-open {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(1.1,1.1,1);
        transform: scale3d(1.1,1.1,1);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
}

то есть если вы хотите использовать такую анимацию то вам нужно просто для любого елемента добавить:

.your-class {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

Если вы хотите отказаться от плагина, то не забудьте перенести @keyframes к себе в стили. И на нужное событие добавить css свойства:

-webkit-animation-name: anim-open;
animation-name: anim-open;
3
  • не срабатывает. 21 фев 2020 в 7:45
  • Поправил описание
    – user243545
    21 фев 2020 в 7:48
  • мне кажется что мне нужна анимация send-letter которая находится в самом низу css файла. Мне нужна анимация конверта при отправке сообщения 21 фев 2020 в 8:11
0

.mistape-letter{
	width: 640px;
	height: 400px;
	top: calc(50% - 200px);
	position: absolute;
}

.mistape-letter-front{
	width: 304px;
	height: 190px;
	/*background: url(../img/letter-front.svg) no-repeat;*/
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDY0MCA0MDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCA0MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5bGluZSBpZD0ibGVmdCIgZmlsbD0iI0U1MjEyOSIgcG9pbnRzPSIwLDAgMCw0MDAgNC4wNjMsNDAwIDMyMi43NSwyMDEuNzUgMCwwICIvPjxwb2x5Z29uIGlkPSJib3R0b20iIGZpbGw9IiNENjI3MzQiIHBvaW50cz0iMCw0MDAgNjQwLDQwMCA2NDAsMzk4Ljk1MyAzMjAuMjgxLDE5OS44MjggIi8+PHBvbHlsaW5lIGlkPSJyaWdodCIgZmlsbD0iI0JDMjMzRCIgcG9pbnRzPSI2NDAsMCAzMjAsMjAwIDY0MCw0MDAgNjQwLDAgIi8+PC9zdmc+);*/
    /*background-repeat: no-repeat;*/
    /*background-size: 100% 100%;*/
	position: absolute;
	bottom: 0;
	z-index: 4;
	left: calc(50% - 152px);
	transform: scale(0.145);
	transform-origin: 50% 100%;
	opacity: 0;
	transition: transform 0.4s, opacity 0.15s;
}

.mistape-letter-front .front-left {
    width: 0;
    height: 0;
    border-left: 152px solid #E42029;
    border-right: 0;
    border-top: 95px solid transparent;
    border-bottom: 95px solid transparent;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

.mistape-letter-front .front-right {
    width: 0;
    height: 0;
    border-right: 152px solid #E42029;
    border-left: 0;
    border-top: 95px solid transparent;
    border-bottom: 95px solid transparent;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
}

.mistape-letter-front .front-right:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-right: 152px solid rgba(0,0,0,0.2);
    border-left: 0;
    border-top: 95px solid transparent;
    border-bottom: 95px solid transparent;
    position: absolute;
    top: -95px;
    right: -152px;
}

.mistape-letter-front .front-bottom {
    width: 0;
    height: 0;
    border-bottom: 95px solid #E42029;
    border-top: 0;
    border-left: 152px solid transparent;
    border-right: 152px solid transparent;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
}

.mistape-letter-front .front-bottom:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-bottom: 95px solid rgba(0,0,0,0.1);
    border-top: 0;
    border-left: 152px solid transparent;
    border-right: 152px solid transparent;
    position: absolute;
    top: 0;
    right: -152px;
}

.mistape-letter-back{
	width: 304px;
	height: 190px;
	/*background: url(../img/letter-back.svg) no-repeat;*/
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDY0MCA0MDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCA0MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjAiIGZpbGw9IiNCMjI0NDMiIHdpZHRoPSI2NDAiIGhlaWdodD0iNDAwIi8+PHBvbHlsaW5lIGlkPSJ0b3AxIiBkaXNwbGF5PSJub25lIiBmaWxsPSIjQjIyNDQzIiBwb2ludHM9IjAsMCAzMjAsMjAwIDY0MCwwICIvPjwvc3ZnPg==);*/
    background-color: #E42029;
    background-repeat: no-repeat;
    background-size: 100% 100%;
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: calc(50% - 152px);
	transition: transform 0.4s, opacity 0.15s;
	transform: scale(0.145);
	transform-origin: 50% 100%;
	opacity: 0;
}
.mistape-letter-back:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.4);
}
.mistape-letter-back > .mistape-letter-back-top{
	/*width: 304px;*/
	/*height: 95px;*/
    width: 0;
    height: 0;
	/*background: url(../img/letter-t2.svg) no-repeat;*/
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDY0MCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGlkPSJ0b3AyIiBmaWxsPSIjOTcxRTNGIiBwb2ludHM9IjAsMjAwIDY0MCwyMDAgMzIwLDAgIi8+PC9zdmc+);*/
    border-bottom: 95px solid #E42029;
    border-top: 0;
    border-left: 152px solid transparent;
    border-right: 152px solid transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
	position: absolute;
	z-index: 2;
	bottom: 100%;
	left: calc(50% - 152px);
	transition: transform 0.4s;
	transform-origin: 50% 100%;
	transform: translateX(0) rotateX(-180deg);
}
.mistape-letter-back > .mistape-letter-back-top:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-bottom: 95px solid rgba(0,0,0,.3);
    border-top: 0;
    border-left: 152px solid transparent;
    border-right: 152px solid transparent;
    position: absolute;
    top: 0;
    left: -152px;
}
.mistape-letter-top {
    width: 0;
    height: 0;
    /*background: url(../img/letter-t2.svg) no-repeat;*/
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDY0MCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGlkPSJ0b3AyIiBmaWxsPSIjOTcxRTNGIiBwb2ludHM9IjAsMjAwIDY0MCwyMDAgMzIwLDAgIi8+PC9zdmc+);*/
    /*background-repeat: no-repeat;*/
    /*background-size: 100% 100%;*/
    border-bottom: 95px solid #E42029;
    border-top: 0;
    border-left: 152px solid transparent;
    border-right: 152px solid transparent;
    position: absolute;
    z-index: 2;
    bottom: 0;
    opacity: 0;
    left: calc(50% - 152px);
    transition: transform 0.3s;
    transform-origin: 50% 100%;
    transform: rotateX(0deg);
}
.mistape-letter-top:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-bottom: 95px solid rgba(0,0,0,.3);
    border-top: 0;
    border-left: 152px solid transparent;
    border-right: 152px solid transparent;
    position: absolute;
    top: 0;
    left: -152px;
}
.mistape-letter-top.close {
	transform: rotateX(-180deg);
}
#mistape_dialog .dialog__content .dialog-wrap{
	z-index: 3;
	position: relative;
}

#mistape_dialog .dialog__content.show-letter .mistape-letter-back,
#mistape_dialog .dialog__content.show-letter .mistape-letter-front{
	transform: scale(1) translateY(15%);
	opacity: 1;
}
#mistape_dialog .dialog__content.show-letter .mistape-letter-back > .mistape-letter-back-top{
	transform: rotateX(0deg);
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-top{
	transform: rotateX(-180deg);
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-bottom{
	background: #c1c1c1;
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-bottom textarea{
	background: #c1c1c1;
}
#mistape_dialog .dialog__content.show-letter .dialog-wrap{
	transform: translateY(-150%);
}
#mistape_dialog .dialog__content.show-letter.with-comment .dialog-wrap{
	transform: translateY(-50%);
}
#mistape_dialog .mistape_action[data-action="send"]{
	position: relative;
	z-index: 8;
}
#mistape_dialog .dialog__content.show-letter .mistape_action[data-action="send"]{
	transition-delay: 0.3s;
	transition: visibility 0.1s, opacity 0.1s;
	visibility: hidden!important;
	opacity: 0!important;
}


@keyframes send-letter1 {
	0% { transform: translateX(0) translateY(15%); }
	20% { transform: translateX(-60%) translateY(15%); }
	100% { transform: translateX(100vw) translateY(15%); }
}

@-moz-keyframes send-letter1 {
	0% { transform: translateX(0) translateY(15%); }
	20% { transform: translateX(-60%) translateY(15%); }
	100% { transform: translateX(100vw) translateY(15%); }
}
@-webkit-keyframes send-letter1 {
	0% { transform: translateX(0) translateY(15%); }
	20% { transform: translateX(-60%) translateY(15%); }
	100% { transform: translateX(100vw) translateY(15%); }
}

@keyframes send-letter2 {
	0% { transform: translateX(0) rotateX(-180deg); }
	20% { transform: translateX(-60%) rotateX(-180deg); }
	100% { transform: translateX(100vw) rotateX(-180deg); }
}
@-moz-keyframes send-letter2 {
	0% { transform: translateX(0) rotateX(-180deg); }
	20% { transform: translateX(-60%) rotateX(-180deg); }
	100% { transform: translateX(100vw) rotateX(-180deg); }
}
@-webkit-keyframes send-letter2 {
	0% { transform: translateX(0) rotateX(-180deg); }
	20% { transform: translateX(-60%) rotateX(-180deg); }
	100% { transform: translateX(100vw) rotateX(-180deg); }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.