I added the messenger plugin script and DIV right above the HEAD section on my HTML.
The plugin does not work as described in https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#steps
Cannot close the text bubble.
Plugin do not default on hidden for mobile.
The attributes do not seem to work either.
Any thoughts?
I just found a solution:
<style>
.fb_customer_chat_bounce_out_v2 { animation-fill-mode: forwards; display: unset !important; }
.fb_customer_chat_bounce_in_v2 { display: unset !important; }
.fb_iframe_widget iframe { display: none; }
</style>
This worked for me.
Until Facebook will fix this bug, you can temporarily fix this by adding display: none to their .fb_customer_chat_bounce_out_v2 class:
.fb_customer_chat_bounce_out_v2 {
display: none;
}
if you select left direction
so you can add this css
<style>
#keyframes fb_bounce_in_from_right {
0% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left
}
50% {
transform: scale(1.03, 1.03);
transform-origin: bottom left
}
100% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left
}
}
#keyframes fb_bounce_out_from_right {
0% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left
}
100% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left
}
}
</style>
Related
Take a look at this simple JsFiddle I created.
What it does is simply inserts a new li element with a slide effect from left, when the ul display is on flex and inline-block.
Something similar to that is Stackoverflow chat avatars when someone joins.
#-webkit-keyframes enter {
0% { /*opacity:0;*/ -webkit-transform: translateX(-100%); }
100% { /*opacity:1;*/ -webkit-transform: translateX(0px); }
}
#-webkit-keyframes moves {
0% { /*opacity:0;*/ -webkit-transform: translateX(-50px); }
100% { /*opacity:1;*/ -webkit-transform: translateX(0px); }
}
in my enter animation, I start with translate -100% because I want my item come from left distanced by his size.
and in the moves animation, I want to move the whole ul to the right, by the size of the entering element.
Now I set it hard-coded, to 50px because my elements are set to 50px:
li {
width: 50px;
height: 50px;
display: inline-block;
background-color: red;
}
How can I make it calculate the width OR height automatically, on how much to translate the ul?
Example: Calculate these 50px automatically
You can do this by animating only the added element by using negative margin:
setTimeout(() => {
var item = $("<li></li>").addClass("enter");
$("ul").prepend(item).addClass('move');
}, 2000);
ul {
display: flex;
transition-timing-function: ease-out;
transition: all .2s;
}
li {
--h:50px;
width: 50px;
height: var(--h);
display: inline-block;
background-color: red;
}
.enter {
animation: enter 1s;
}
#keyframes enter {
0% {
transform: translateX(-100%);
margin-left: calc(var(--h) * -1);
}
100% {
transform: translateX(0px);
margin-left: 0
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="my-flex-thing">a</li>
<li class="my-flex-thing">b</li>
</ul>
I want that whenever I click on the div, it first translate, then rotate and, finally scale. Further, I want to reverse it back in the same way when I click again
I have the following code:
$(() => {
$('div').on('click', () => {
$('div').toggleClass('clicked');
});
});
div.normal {
height: 20px;
width: 100px;
background: black;
transition: 2s all;
}
div.clicked {
transform: translate(100px, 100px) rotate(45deg) scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='normal'></div>
As you can see, all the transformations are occurring at the same time. But, I want them to occur separately. How do I achieve this?
Thanks in advance!
Decompose your animation using keyframes. Here is a minimally edited version of your code:
var $el = $('#to-animate')
var firstClick = true
$el.click(() => {
$el.toggleClass('clicked')
if (!firstClick) {
$el.toggleClass('unclicked')
}
firstClick = false
})
div.normal {
height: 20px;
width: 100px;
background: black;
}
div.clicked {
animation: transforms 2s forwards;
}
div.unclicked {
animation: transforms-2 2s reverse;
}
#keyframes transforms {
33% {
transform: translate(100px, 100px);
}
66% {
transform: translate(100px, 100px) rotate(45deg);
}
100% {
transform: translate(100px, 100px) rotate(45deg) scale(2);
}
}
#keyframes transforms-2 {
33% {
transform: translate(100px, 100px);
}
66% {
transform: translate(100px, 100px) rotate(45deg);
}
100% {
transform: translate(100px, 100px) rotate(45deg) scale(2);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="to-animate" class='normal'></div>
Edit updated to include ability to reverse the animation (making the code edit less minimal)
An idea is to rely on other properties to achieve the same effect and be able to apply different transition
$(() => {
$('div').on('click', () => {
$('div').toggleClass('clicked');
});
});
div.normal {
height: calc(20px * var(--s,1));
width: calc(100px * var(--s,1));
background: black;
position:relative;
top:0;
left:0;
transition: 2s top 4s,2s left 4s,2s width 2s,2s height 2s,2s transform;
}
div.clicked {
top:100px;
left:100px;
--s:2;
transform:rotate(45deg);
transition: 2s top,2s left,2s width 2s,2s height 2s,2s transform 4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='normal'></div>
I am trying to use ngRepeat to load an image and play it's associated tone, then move the image from the center of the circle to a specific position on a circle, and proceed with the doing the same thing with the next image. I got the images to display and move one by one using ng-enter-stagger, however the images have different positions so when I change it to to use a different class for each repetition, ng-enter-stagger does not work.
How can I go about loading one image, moving it to the proper position, hiding the image, then proceeding with the next image?
I have created a plunkr but the animation does not work in it https://plnkr.co/edit/DddST6JsemsCKKf3mQ6N?p=preview.
An example of what I want to do is the Learn the sounds part of this (http://www.absolutepitchstudy.com/animalgame/) click either Start Control or Start Animal Game
The data looks like this:
"ImageTones":[{"CPosition":"deg60","Image":{"ImageFileName":"Alligator.png","ImageId":1},"Tone":{"ToneFileName":"C3.mp4","ToneId":1}},
{"CPosition":"deg0","Image":{"ImageFileName":"Cow.png","ImageId":4},"Tone":{"ToneFileName":"B5.mp4","ToneId":2}},
{"CPosition":"deg270","Image":{"ImageFileName":"Bird.png","ImageId":3},"Tone":{"ToneFileName":"E3.mp4","ToneId":3}}]
Html page:
<div class="circle-container">
<div ng-repeat="it in model.imageTones" class="it.CPosition">
<img ng-src="../Content/Game/Animals/{{it.Image.ImageFileName}}"/>
<!--Audio tag goes here-->
</div>
</div>
My CSS (I may be able to fix this to not have as many classes, just am unsure how)
.circle-container {
position: relative;
width: 38em;
height: 38em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 80%;
margin: -5.25em auto 0;
}
.circle-container div {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container div.ng-enter {
transition: 5s linear all;
opacity: 0;
}
.circle-container div.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 5.0s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
.circle-container div.ng-enter.ng-enter-active {
/* standard transition styles */
opacity:1;
}
.deg0.ng-enter-active {
transform: translate(19em);
}
.deg30.ng-enter-active {
transform: rotate(30deg) translate(19em) rotate(-30deg);
}
.deg60.ng-enter-active {
transform: rotate(60deg) translate(19em) rotate(-60deg);
}
.deg90.ng-enter-active {
transform: rotate(90deg) translate(19em) rotate(-90deg);
transition: transform 5s;
}
.deg120.ng-enter-active {
transform: rotate(120deg) translate(19em) rotate(-120deg);
}
.deg150.ng-enter-active {
transform: rotate(150deg) translate(19em) rotate(-150deg);
}
.deg180.ng-enter-active {
transform: rotate(180deg) translate(19em) rotate(-180deg);
}
.deg210.ng-enter-active {
transform: rotate(210deg) translate(19em) rotate(-210deg);
}
.deg240.ng-enter-active {
transform: rotate(240deg) translate(19em) rotate(-240deg);
}
.deg270.ng-enter-active {
transform: rotate(270deg) translate(19em) rotate(-270deg);
}
.deg300.ng-enter-active {
transform: rotate(300deg) translate(19em) rotate(-300deg);
}
.deg330.ng-enter-active {
transform: rotate(330deg) translate(19em) rotate(-330deg);
}
There's a couple of errors to look at 1st, To get a value of a class from an angular item, it's ng-class you should be looking for:
<div ng-repeat="it in model.imageTones" ng-class="it.CPosition" ng-if="!it.hidden" >
<img ng-src="http://www.absolutepitchstudy.com/animalgame/content/images/{{it.Image.ImageFileName}}" />
</div>
Then in you style sheet there seems to be something wrong with the CSS, so I removed a class that wasn't being used:
.deg60{
transform: rotate(60deg) translate(19em) rotate(-60deg);
}
Although to hide stuff you may want that back.
The updated plunk with the work so far is at:
plunky
Now it's being rendered in the right place, you can use $timeout, ng-click or someother method to alter the class definition in your model. The position of the graphic should automatically update.
What method were you going to use?
I'm trying to get content to move across the screen but I was having trouble moving text with Bootstrap's carousel.
I have an animation working, but the divs sit on top of each other so they animate in and out of their own positions, not in and out of the same position.
Here's the CSS
/* Home and about pages */
#about-page {
transform: translateX(200%);
}
.slideOutLeft {
animation: slideOutLeft 1s forwards;
}
.slideInLeft {
transform: translateX(-200%);
animation: slideInLeft 1s forwards;
}
.slideOutRight{
transform: translateX(200%);
animation: slideOutRight 1s forwards;
}
.slideInRight {
animation: slideInRight 1s forwards;
}
/* Slide in from the left */
#keyframes slideOutLeft {
0% { transform: translateX(0%); }
100% { transform: translateX(-200%); }
}
#keyframes slideInLeft {
0% { transform: translateX(-200%); }
100% { transform: translateX(0%); }
}
#keyframes slideOutRight {
0% { transform: translateX(0%); }
100% { transform: translateX(200%); }
}
#keyframes slideInRight {
0% { transform: translateX(200%); }
100% { transform: translateX(0%); }
}
which is triggered by the following JavaScript
$(function() {
// Go to home
$("#home-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#about-link').removeClass('active');
// Slide in homepage
$('#home-page').removeClass('slideOutLeft');
$('#home-page').addClass('slideInLeft');
// Slide out about page
$('#about-page').removeClass('slideInRight');
$('#about-page').addClass('slideOutRight');
$('#about-page').addClass('hidden');
});
// Go to about slide
$("#about-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#home-link').removeClass('active');
// Slide out homepage
$('#home-page').removeClass('slideInLeft');
$('#home-page').addClass('slideOutLeft');
$('#home-page').addClass('hidden');
// Slide in about page
$('#about-page').removeClass('slideOutRight');
$('#about-page').addClass('slideInRight');
});
});
You can see the problem at testing version of the site here.
Thanks for all of your help and advice.
First add a class item in your page containers
<div class="inner cover">
<div id="home-page" class="item">
<!-- content -->
</div>
<div id="about-page" class="item">
<!-- content -->
</div>
</div>
Add this block in your css
.inner.cover {
position: relative;
overflow: hidden;
height: 200px;
}
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
Right now I'm trying to put together something really simple, learn from it, and incorporate it in a bigger project.
I have a simple box I'm trying to move from one position to another using css webkit animations and the translate function (for iOS hardware acceloration purposes). I need it to move in an arc and then stay at that point at the top of the arc.
Now, I'm pretty new to CSS transitions. In the past I've used jQuery animations but that seems to run really slowly on mobile devices. I know there's probably some best practice ideas I can incorporate here for setting and manging these animations, but I'm kinda figuring them out as I go.
Right now the box moves all the way up and then appears back in the starting position. How do I get it to stay there?
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/M/march_madness/tmp/
<style type="text/css">
#ball {
display:block;
position: absolute;
width: 50px;
height: 50px;
overflow: hidden;
top: 500px;
left: 100px;
background-color: red;
} #action {
display: block;
font-weight:bold;
}
.animation {
-webkit-animation-name: throwBall;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes throwBall {
from { -webkit-transform: translate( 0px, 0px ); }
25% { -webkit-transform: translate( 75px, -25px ) }
50% { -webkit-transform: translate( 150px, -75px ) }
75% { -webkit-transform: translate( 225px, -150px ) }
to { -webkit-transform: translate( 300px, -300px ); }
}
</style>
<script type="text/javascript">
if ( typeof(jQuery) == 'undefined' ) document.write('<scri'+ 'pt type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></scri'+'pt>');
</script>
<a id='action'>Animate Me</a>
<div id='ball'></div>
<script type="text/javascript">
$(document).ready(function(){
$('#action').bind('click',function(){
$('#ball').addClass('animation').bind('webkitAnimationEnd',function(){
});
});
});
</script>
Just add the end state of the animation to your class as properties set by animation are removed when animation ends. Adding -webkit-transform: translate(300px, -300px); to your animation class fixes your problem.
.animation {
-webkit-animation-name: throwBall;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform: translate(300px, -300px);
}